文字绕圆排列：vue

港控/mmm° 2022-09-11 03:18 155阅读 0赞

这个是对https://blog.csdn.net/qq\_33769914/article/details/120240457这个文章的一种简化

效果看起来也好一点

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_13_color_FFFFFF_t_70_g_se_x_16][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_10_color_FFFFFF_t_70_g_se_x_16][]

> <template>  
>     <div class="container">  
>         <div class="emblem">  
>             <div class="text" v-for="(text, index) in emblemText" :key="index" :style="'transform: rotateZ('+ getDeg(index) +')'">  
>                 \{ \{text\}\}  
>             </div>  
>         </div>  
>     </div>  
> </template>
> 
> <script>  
>     export default \{  
>         data() \{  
>             return \{
> 
>                 emblemText: \['表  达', '创  意', '韵  律', '情  感', '图  画', '秩  序', '规  则', '分  析', '推  理', '探  索', '行  动', '言  辞'\]  
>             \}  
>         \},
> 
>         methods: \{  
>             getDeg(index) \{  
>                 return (index + 1) \* 30 - 15 + 'deg' ；//一个圆是360度这里划分成了12份。每个文字角度是30度。然后从第一个文字开始距离水平线是倾斜了15度的  
>             \},  
>         \},  
>         mounted()\{  
>         \}  
>     \}  
> </script>
> 
> <style lang="scss" scoped>  
>         .emblem \{  
>             position: absolute;  
>             top: 50%;  
>             left: 50%;  
>             right: 0;  
>             bottom: 0;  
>             transform: translate(-50%, -50%);  
>             width: 240px;  
>             height: 240px;  
>             border-radius: 50%;  
>             color: \#8e9ba2;  
>             text-align: center;  
>             overflow: hidden;  
>         \}
> 
>     .emblem .text \{  
>         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);  
>     \}
> 
> </style>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20210911174029278.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSP5aSp5oOz,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSP5aSp5oOz_size_10_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/544f87c7d2d44f908cc77eb86d7689d5.png