java正弦余弦生成环形文字_可生成环形文字的纯js插件

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');