2024年5月26日 星期日
半圆环文字效果·效果
半圆环文字效果·代码(/p>
<style>
#sDiv {
position: relative;
margin: 20px auto;
width: 300px;
height: 300px;
}
.text {
position: absolute;
font: bold 30px sans-serif;
}
</style>
<div id="sDiv"></div>
<script>
var txtAr = '秦時明月漢時關'.split('');
var dw = sDiv.offsetWidth, dh = sDiv.offsetHeight;
var r1 = dw / 2 - 10, r2 = dh / 2 - 10;
txtAr.forEach((t,k) => {
var a = 180 / txtAr.length * (k + 0.5) + 180;
// y值 r2 后面的加号变减号凸面朝下
var x = r1 + Math.cos(Math.PI / 180 * a) * r1,
y = r2 + Math.sin(Math.PI / 180 * a) * r2;
var tBox = document.createElement('span');
tBox.className = 'text';
tBox.style.cssText += `
left: ${x}px;
top: ${y}px;
color: #${Math.random().toString(16).substring(2,8)};
`;
tBox.textContent = t;
sDiv.appendChild(tBox);
});
</script>
| 
发表于 2024-5-26 15:42
那挺大的
听着也很惬意的样子。。标配呗