多面体彩环字幕 转自马黑教程专版

admin

admin

<style>
.body { perspective: 1000px; }
.stage {
        --len: 100px;
        margin: 80px auto 0;
        position: relative;
        width: var(--len);
        height: var(--len);
        transform-style: preserve-3d;
        animation: rot 15s linear infinite;
}
.stage div {
        position: absolute;
        width: inherit;
        height: inherit;
        color: #eee;
        text-shadow: 1px 1px 3px #111;
        font: 2em / var(--len) Arial;
        text-align: center;
        left: 0; top: 0;
        opacity: .8;
}

@keyframes rot {
        from { transform: rotateY(0deg); }
        to { transform: rotateY(-360deg); }
}
</style>

<div class="stage"></div>

<script>
let stage = document.querySelector(".stage");
let txt = "悦颐家园网歡迎您";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
        let cc = `#${Math.random().toString(16).substr(-6)}`;
        let ry = Math.floor(j*angle);
        str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
</script>

admin

代码中，景深放在 body 选择器，实际使用时可以放在帖子主体元素的CSS代码处。