Texto Circular con CSS y JS
¿Cómo diseñar un texto circular con CSS y JS pocas líneas?
Para obtener un texto circular para una página web, primero debemos tener la frase y luego dividirla con split para hacer rotar cada elemento con JS y CSS
En ocaciones el desarrollo frontend, bueno básicamente el desarrollador se encuentra con el diseño de un texto circular ya sea en ilustración o en un diseño html y css, pues bien, dependiendo de los requerimientos puede optar por diseñar el efecto con JS y CSS.
Bueno entonces aqui tienes un forma sencilla de obtener
Veamos el código html
<div class="center">
<h1 id="circle">DISEÑO FRONTEND HTML CSS JAVASCRIPT </h1>
</div>
CSS
.center{
display: grid;
place-items: center;
}
#circle span{
position: absolute;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
height: 140px;
font-size: 25px;
width: 20px;
text-align: center;
transform-origin: bottom center;
}
y JAVASCRIPT FINALMENTE
circle = document.getElementById("circle")
circlearray = circle.textContent.split('')
circle.textContent = ''
for(var i = 0; i< circlearray.length; i++){
circle.innerHTML += '<span style="transform:rotate('+((i+1)*10)+'deg)">'+ circlearray[i]+'</span>'
}
Puedes descargar el código completo.
Redactado por: , Leido 4979 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022