论坛 › 马黑黑教程专版 › 明月出天山

马黑黑 发表于 2024-6-7 13:56

明月出天山

<style>
        #mydiv {
                margin: auto;
                width: 760px;
                height:300px;
                border: 1px solid gray;
                position: relative;
        }
        txt-box {
                position: absolute;
                display: grid;
                place-items: center;
                left: var(--xx);
                top: 10px;
                width: 50px;
                height: 50px;
                font: normal 30px sans-serif;
                transition: .5s;
                animation: move 5s var(--delay) linear infinite alternate;
        }
        txt-box::after {
                position: absolute;
                content: '';
                inset: -6px;
                border: thick groove gold;
                border-radius: 20% 60%;
                animation: rot 5s var(--delay) linear infinite alternate;
        }
        txt-box:hover {
                filter: invert(100%) drop-shadow(0 -10px 30px black);
        }
        @keyframes move { to { top: 240px; } }
        @keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
</style>

<div id="mydiv"></div>

<script>
(function() {
        const ar = '明月出天山苍茫云海间'.split('');
        const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
        let tbAr = [];
        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k + 40}px;
                        --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                mydiv.appendChild(tbox);
        });
})();
</script>

马黑黑 发表于 2024-6-7 13:56

代码
<style>
        #mydiv {
                margin: auto;
                width: 760px;
                height:300px;
                border: 1px solid gray;
                position: relative;
        }
        txt-box {
                position: absolute;
                display: grid;
                place-items: center;
                left: var(--xx);
                top: 10px;
                width: 50px;
                height: 50px;
                font: normal 30px sans-serif;
                transition: .5s;
                animation: move 5s var(--delay) linear infinite alternate;
        }
        txt-box::after {
                position: absolute;
                content: '';
                inset: -6px;
                border: thick groove gold;
                border-radius: 20% 60%;
                animation: rot 5s var(--delay) linear infinite alternate;
        }
        txt-box:hover {
                filter: invert(100%) drop-shadow(0 -10px 30px black);
        }
        @keyframes move { to { top: 240px; } }
        @keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
</style>

<div id="mydiv"></div>

<script>
(function() {
        const ar = '明月出天山苍茫云海间'.split('');
        const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
        let tbAr = [];
        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k + 40}px;
                        --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                mydiv.appendChild(tbox);
        });
})();
</script>

红影 发表于 2024-6-7 16:23

这个是边框围绕文字旋转了，而且能正转反转呢{:4_187:}

红影 发表于 2024-6-7 16:25

原来给它景深，并设置Y和Z的值有这样的效果{:4_187:}

南无月 发表于 2024-6-7 18:05

跳绳变成呼啦圈了。。{:4_170:}

南无月 发表于 2024-6-7 18:06

边框有金属的质感，挺好看，碰边即回。。{:4_199:}

马黑黑 发表于 2024-6-7 18:10

南无月 发表于 2024-6-7 18:06
边框有金属的质感，挺好看，碰边即回。。

这个是3d动画，不过由于没有背景衬托，也由于变化幅度小，不太容易感觉得到

马黑黑 发表于 2024-6-7 18:15

红影 发表于 2024-6-7 16:25
原来给它景深，并设置Y和Z的值有这样的效果

3d转换

马黑黑 发表于 2024-6-7 18:15

红影 发表于 2024-6-7 16:23
这个是边框围绕文字旋转了，而且能正转反转呢

{:4_190:}

马黑黑 发表于 2024-6-7 18:16

南无月 发表于 2024-6-7 18:05
跳绳变成呼啦圈了。。

束腰训练，想从橄榄变豆芽

红影 发表于 2024-6-7 19:42

马黑黑 发表于 2024-6-7 18:15
3d转换

嗯嗯，这个更高级了{:4_187:}

红影 发表于 2024-6-7 19:43

马黑黑 发表于 2024-6-7 18:15


没想到就是个文字外围也有这么多设置呢{:4_187:}

马黑黑 发表于 2024-6-7 19:49

红影 发表于 2024-6-7 19:43
没想到就是个文字外围也有这么多设置呢

{:4_196:}

马黑黑 发表于 2024-6-7 19:49

红影 发表于 2024-6-7 19:42
嗯嗯，这个更高级了

一般一般

南无月 发表于 2024-6-7 21:06

马黑黑 发表于 2024-6-7 18:16
束腰训练，想从橄榄变豆芽

老师心想就能贴成，事也能成{:4_170:}

南无月 发表于 2024-6-7 21:07

马黑黑 发表于 2024-6-7 18:10
这个是3d动画，不过由于没有背景衬托，也由于变化幅度小，不太容易感觉得到

好哒，等会拿代码去瞧一瞧老师说的。。

红影 发表于 2024-6-7 21:27

马黑黑 发表于 2024-6-7 19:49


这个完全没想到。

红影 发表于 2024-6-7 21:29

马黑黑 发表于 2024-6-7 19:49
一般一般

很奇妙呢{:4_187:}

马黑黑 发表于 2024-6-7 23:02

红影 发表于 2024-6-7 21:29
很奇妙呢

还好还好

马黑黑 发表于 2024-6-7 23:03

红影 发表于 2024-6-7 21:27
这个完全没想到。

想想就能想到

查看完整版本: 明月出天山