文本/链接
可生成环形文字的纯js插件
PetitQ
emblem.js 是一款可以生成环形文字的 js 插件。emblem.js 是纯 js 插件，无任何外部依赖。它通过将每一个字符进行包裹，并通过 CSS transform 属性将它们分别进行旋转，形成一个完整的圆形。
使用方法:
在页面中引入 emblem.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/emblem.js"></script>
HTML 结构:
使用一个[div]作为文字的容器。
<div class="emblem">这里放置你的文字...</div>
CSS 样式:
emblem.js 会将容器中的每一个文字都包裹在一个元素中，你可以为它没设置自己的样式。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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
