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