html+css3实现文字环绕旋转特效

1、新建html文档。

2、书写hmtl代码。<div class="emblem"><span style="transform: rotateZ(0deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(20deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(40deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(60deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(80deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(100deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(120deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(140deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(160deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(180deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(200deg) translate3d(0px, 0px, 0px);">.</span><span style="transform: rotateZ(220deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(240deg) translate3d(0px, 0px, 0px);">h</span><span style="transform: rotateZ(260deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(280deg) translate3d(0px, 0px, 0px);">.</span><span style="transform: rotateZ(300deg) translate3d(0px, 0px, 0px);">百</span><span style="transform: rotateZ(320deg) translate3d(0px, 0px, 0px);">n</span><span style="transform: rotateZ(340deg) translate3d(0px, 0px, 0px);">*</span></div>

3、初始化css代码。

html,  body { height: 100%; margin: 0; overflow: hidden; background: #FFFCEC; font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo; }

4、书写css代码。

<style>

.emblem { position: absolute; left: 0; right: 0; top: 25vh; margin: 0 auto; width: 50vh; height: 50vh; border-radius: 50%; font-weight: bold; color: #003A6F; animation: spinZ 20s linear infinite; text-align: center; }

.emblem span { position: absolute; display: inline-block; left: 0; right: 0; top: 0; bottom: 0; text-transform: uppercase; font-size: 4vh; transition: all 0.5s cubic-bezier(0, 0, 0, 1); }

 @keyframes spinZ {  0% {

 transform: rotateZ(360deg);

}

 100% {

 transform: rotateZ(0deg);

}

}

</style>

5、代码整体结构。

6、查看效果。