emblem.js是一款可以生成环形文字的js插件。emblem.js是纯js插件,无任何外部依赖。它通过将每一个字符进行包裹,并通过CSS3 transform属性将它们分别进行旋转,形成一个完整的圆形。
使用方法
在页面中引入emblem.js文件。
<script type="text/javascript" src="js/emblem.js"></script>
HTML结构
使用一个<div>
作为文字的容器。
<div class="emblem">这里放置你的文字...</div>
CSS样式
emblem.js会将容器中的每一个文字都包裹在一个<span>
元素中,你可以为它没设置自己的样式。DEMO中设置的样式为:
html, body { height: 100%; margin: 0; overflow: hidden; background: #FFFCEC; font-family: "Microsoft YaHei", Helvetica, Arial,sans-serif; } .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); } }
初始化插件
可以通过下面的方法来初始化emblem.js插件。
Emblem.init('.emblem');
你也可以在初始化时载传入你需要的文字。
Emblem.init('.emblem', 'Hello World');
emblem.js里程表数字动画特效插件的github地址为:https://github.com/GeorgeHastings/emblem