Texto Circular con CSS y JS

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

Texto circular solo con CSS y JS en pocas lìneas de código

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>'
        }

Texto circular animado con Javascript usando una libreria JS adicional:

El archivo css

body {
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold;
    font-size: 24px;
    background: black;    
  }

  .container {
    margin: 0 auto;
    height: 300px;
    width: 300px;    
  }
  
  .logo {
    position: relative;    
    left: 25%;
    top: 25%;
    width: 150px;
    height: 150px;
  }

  @keyframes spin { 
    100% { 
      -webkit-transform: rotate(360deg);
      transform:rotate(360deg); 
    }
  }
  
  .circular-text {
    animation: spin 20s linear infinite;
    display: block;
    color: white;
    position: absolute;
  }

HTML  

    <div class="container">
        <circular-text
          class="circular-text"
          text="Codea App . Codea App . Codea App "
          radius="150">    
        </circular-text>
        <img src="https://scontent.faqp2-2.fna.fbcdn.net/v/t39.30808-6/277558023_1501375490286790_8719695975722740107_n.jpg?_nc_cat=101&ccb=1-7&_nc_sid=5f2048&_nc_ohc=LfhylonMngoAX8U_iVc&_nc_ht=scontent.faqp2-2.fna&oh=00_AfAC1FVNbJfXqly_KDQE9zuUn0pCFJbbIwZJ09yCtmPfJw&oe=65549579" class="logo" alt="">
      </div>

Y la libreria JAVASCRIPT      

      <script
        type="module"
        src="https://unpkg.com/@webpunk/circular-text@1.3.0/dist-web/index.bundled.js">
      </script>

Leido 7734 veces