文字绕圆排列：js

Love The Way You Lie 2022-08-28 15:55 108阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_11_color_FFFFFF_t_70_g_se_x_16][]

css文字让一个圆形排列

>   
>     <div class="container">  
>          <div class="emblem"></div>  
>     </div>  
>  
> 
> <script>  
>   
>              var     emblemText= \['创  意', '音  乐', '韵  律', '情  感', '想  象', '图  画', '分  析', '推  理', '文  学', '数  学', '语  言', '逻  辑'\]；  
>             
>         circleText('.emblem');  
>    
>          function   circleText (el, str) \{  
>                 let element = document.querySelector(el);  
>                 emblemText.forEach((v, i) => \{  
>                   let span = document.createElement('span');  
>                   span.innerHTML = \`<pre>$\{emblemText\[i\]\}</pre>\`  
>                   let deg = (i + 1) \* 30 - 15;  
>                   span.style.transform = \`rotateZ($\{deg\}deg)\`  
>                   element.appendChild(span);  
>                 \})  
>             \}  
>   
> </script>
> 
>   
> <style>  
>     .emblem span \{  
>         position: absolute;  
>         display: inline-block;  
>         left: 0;  
>         right: 0;  
>         top: 0;  
>         bottom: 0;  
>         font-size: 12px;  
>         transition: all 0.5s cubic-bezier(0, 0, 0, 1);  
>     \}
> 
> .emblem \{  
>         position: absolute;  
>         left: 0;  
>         right: 0;  
>         top: 30.5px;  
>         margin: 0 auto;  
>         width: 240px; /\* //圆形的直径 \*/  
>         height: 240px;  
>         border-radius: 50%;  
>         color: \#7D970B;  
>         /\*animation: spinZ 20s linear infinite;\*/  
>         text-align: center;  
>         overflow: hidden;  
>     \}  
> </style>

**对于vue项目不用自己在页面使用createElement和循环啊。所以我在下一个文章里面使用vue优化**https://blog.csdn.net/qq\_33769914/article/details/120240867

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_15_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6d05fa8f1a274ae1a29c3835df05cf5e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/447e6fa4cb334b33a8ab2bf522a2c6bf.png