html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形文字的纯js插件</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
background: #EA6D39;;
font-family: 'font84';
overflow-x: hidden;
}
.emblem {
overflow-x: hidden;
position: absolute;
left: 0;
right: 0;
top: 25vh;
margin: 0 auto;
width: 50vh;
height: 50vh;
border-radius: 50%;
color: blueviolet;
text-align: center;
white-space:normal;
}
.emblem div {
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);
}
.emblem div span{
padding: 10px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="emblem">HAPPY 牛 YEAR!</div>
<script type="text/javascript" src="emblem.js"></script>
<script type="text/javascript">
Emblem.init('.emblem');
</script>
<script>
// 如果不要引入特殊字体可以删除以下代码
async function loadFonts() {
console.time('加载加载耗时')
const font = new FontFace(
"font84",
"url('./字体.ttf')"
);
await font.load();
document.fonts.add(font);
document.body.classList.add("fonts-loaded");
console.timeEnd('加载加载耗时')
}
loadFonts()
</script>
</body>
</html>
emblem.js:
var Emblem = {
init: function(el, str) {
var element = document.querySelector(el);
var text = str ? str : element.innerHTML;
element.innerHTML = '';
var arr = []
// 旋转的角度在这里调整
for (var i = 0; i < text.length; i++) {
var rdeg = (90 / text.length)*(i) - 90;
arr.push(rdeg)
}
var min = arr[0], max = arr[arr.length - 1];
const pcdeg = (90 - max) / 2 // 偏差度修正
for (var i = 0; i < arr.length; i++) {
var r = arr[i] + pcdeg
var x = (Math.PI/text.length).toFixed(0) * (i);
var y = (Math.PI/text.length).toFixed(0) * (i);
var letter = text[i];
var div = document.createElement('div');
var span = document.createElement('span');
var node = document.createTextNode(letter);
span.appendChild(node);
div.appendChild(span);
div.style.webkitTransform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
div.style.transform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
element.appendChild(div);
}
}
};
文中emblem.js来自站长之家，学习分享使用。
