html+css3实现文字环绕旋转特效
工具/原料
- adobe dreamweaver
方法/步骤
- 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
查看效果。
END