彩虹字
2020-12-07 本文已影响0人
玛瑙鑫
let angle = 0;
let p = document.querySelector('p');
let text = p.textContent.split('');
let len = text.length;
let phaseJump = 360 / len;
let spans;
p.innerHTML = text.map(function (char) {
return '<span>' + char + '</span>';
}).join('');
spans = p.children;
(function wheee() {
for (var i = 0; i < len; i++) {
spans[i].style.color = 'hsl(' + (angle + Math.floor(i * phaseJump)) + ', 55%, 70%)';
}
angle++;
requestAnimationFrame(wheee);
})();
<p>拼搏过的人生,即便没有成功。也只是不完美,但是它完整!</p>
<style>
p {
position: absolute;
top: 45%;
left: 50%;
width: 50%;
margin: 0;
font: 26px "PT Serif", serif;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
p::first-letter {
float: left;
margin-right: 9px;
line-height: 1em;
font-size: 260%;
}
p::after {
content: "";
display: inline-block;
width: 100%;
}
</style>