emblem.js是一款可以生成环形文字的js插件。emblem.js是纯js插件,无任何外部依赖。它通过将每一个字符进行包裹,并通过CSS3 transform属性将它们分别进行旋转,形成一个完整的圆形。
使用方法
在页面中引入emblem.js文件。
HTML结构
使用一个
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');