论坛 › 动画音画 › 大河悠久

山人 发表于 2024-6-8 11:20

大河悠久

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; }
#tz::before { position: absolute; content: ''; width: var(--size); height: var(--size); background: linear-gradient(cyan, olive, orange, navy); animation: spin 12s linear infinite var(--state); }
#nr { position: absolute; padding: 10px; background: url('https://638183.freep.cn/638183/t24/2/dahe.jpg') no-repeat center/cover; inset: 6px; }
txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 0; width: 50px; height: 50px; font: normal 30px sans-serif; color: white; transition: .5s; cursor: pointer; animation: move 5s var(--delay) linear infinite alternate var(--state); }
txt-box::after { position: absolute; content: ''; inset: -6px; border: thick groove olive; border-radius: 50%; box-shadow: inset 0 0 30px lightblue; transform: perspective(1000px) rotateY(-60deg) rotateZ(0); animation: rot 5s var(--delay) linear infinite alternate var(--state); }
txt-box:hover { filter: hue-rotate(60deg) drop-shadow(0 -10px 30px white); }
#vid { position: absolute; left: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; pointer-events: none; }
#bird { position: absolute; left: 1024px; top: -70px; mix-blend-mode: multiply; animation: fly linear 6s infinite var(--state); }
@keyframes move { to { bottom: 150px; } }
@keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fly { to { left: -400px; } }
</style>

<div id="tz">
        <div id="nr" data-tt="大河悠久">
                <audio id="aud" src="https://music.163.com/song/media/outer/url?id=4904991" autoplay loop></audio>
                <video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/32/44/62dde814a8a83.mp4" muted autoplay loop disablePictureInPichture></video>
                <img id="bird" alt="" src="https://638183.freep.cn/638183/small/flybirds.gif" />
        </div>
</div>

<script>
(function() {
        tz.style.setProperty('--size', Math.ceil(Math.sqrt(tz.offsetWidth ** 2 + tz.offsetHeight ** 2)) + 'px');
        const ar = nr.dataset.tt.split('');
        const total = ar.length, half = Math.floor(ar.length / 2);
        let tbAr = [];

        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${100 * k + 50}px;
                        --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                nr.appendChild(tbox);
        });

        aud.onplaying = aud.onpause = () => {
                tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);
        };

        tbAr.forEach(item => item.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

山人 发表于 2024-6-8 11:22

帖子代码

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; }
#tz::before { position: absolute; content: ''; width: var(--size); height: var(--size); background: linear-gradient(cyan, olive, orange, navy); animation: spin 12s linear infinite var(--state); }
#nr { position: absolute; padding: 10px; background: url('https://638183.freep.cn/638183/t24/2/dahe.jpg') no-repeat center/cover; inset: 6px; }
txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 0; width: 50px; height: 50px; font: normal 30px sans-serif; color: white; transition: .5s; cursor: pointer; animation: move 5s var(--delay) linear infinite alternate var(--state); }
txt-box::after { position: absolute; content: ''; inset: -6px; border: thick groove olive; border-radius: 50%; box-shadow: inset 0 0 30px lightblue; transform: perspective(1000px) rotateY(-60deg) rotateZ(0); animation: rot 5s var(--delay) linear infinite alternate var(--state); }
txt-box:hover { filter: hue-rotate(60deg) drop-shadow(0 -10px 30px white); }
#vid { position: absolute; left: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; pointer-events: none; }
#bird { position: absolute; left: 1024px; top: -70px; mix-blend-mode: multiply; animation: fly linear 6s infinite var(--state); }
@keyframes move { to { bottom: 150px; } }
@keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fly { to { left: -400px; } }
</style>

<div id="tz">
        <div id="nr" data-tt="大河悠久">
                <audio id="aud" src="https://music.163.com/song/media/outer/url?id=4904991" autoplay loop></audio>
                <video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/32/44/62dde814a8a83.mp4" muted autoplay loop disablePictureInPichture></video>
                <img id="bird" alt="" src="https://638183.freep.cn/638183/small/flybirds.gif" />
        </div>
</div>

<script>
(function() {
        tz.style.setProperty('--size', Math.ceil(Math.sqrt(tz.offsetWidth ** 2 + tz.offsetHeight ** 2)) + 'px');
        const ar = nr.dataset.tt.split('');
        const total = ar.length, half = Math.floor(ar.length / 2);
        let tbAr = [];

        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${100 * k + 50}px;
                        --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                nr.appendChild(tbox);
        });

        aud.onplaying = aud.onpause = () => {
                tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);
        };

        tbAr.forEach(item => item.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

山人 发表于 2024-6-8 11:32

主要特点：

（一）流金溢彩边框

使用旋转的 ::before 伪元素模拟。伪元素背景渐变，它应该是一个正方形，宽高应大于宿主元素最长边的尺寸，在JS中计算完成，做帖者无需计算，但可以了解一下计算原理：勾股定理，c² = a² + b²，c 即为伪元素的边长，a、b 是帖子容器元素的边长。

（二）文本按钮动画

请参阅马老师的帖子： https://www.huachaowang.com/forum.php?mod=viewthread&tid=76398&extra=page%3D1

山人 发表于 2024-6-8 11:38

可以考虑将文本按钮的文本也纳入3d转换场景。本帖出于保护文本阅读的友好性，未如此操作。

小辣椒 发表于 2024-6-8 12:59

这个标题字效果也是特棒！{:4_199:}

小辣椒 发表于 2024-6-8 13:03

整体效果也是漂亮{:4_178:}

争取套用一个玩玩

红影 发表于 2024-6-8 16:55

3d边框的实例呢，这个漂亮，意境悠远。欣赏山人好帖{:4_199:}

醉美水芙蓉 发表于 2024-6-8 17:03

红影 发表于 2024-6-8 17:11

视频的滤镜加得好，这样设置后，落日就成了月亮的效果了，原来视频还可以这样转化呢。
动图的移动也漂亮。流动边框也很漂亮。{:4_199:}
还有些没看懂，比如tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);，最后那句也出现item，对这个不太理解呢{:4_173:}

红影 发表于 2024-6-8 17:25

嗯，现在知道了，item本来就是自己设的，这个设成什么都行的{:4_173:}

山人 发表于 2024-6-8 17:40

红影 发表于 2024-6-8 17:25
嗯，现在知道了，item本来就是自己设的，这个设成什么都行的

马老师没有交过这个么？太疏忽了{:4_173:}

山人 发表于 2024-6-8 17:46

红影 发表于 2024-6-8 17:11
视频的滤镜加得好，这样设置后，落日就成了月亮的效果了，原来视频还可以这样转化呢。
动图的移动也漂亮。 ...

video是可视元素，所有可视元素 都可以通过 mix-blend-mode 滤镜致使它和下层的背景融合。

数组（或可迭代对象）.forEach(...) 循环遍历，需要给出至少一个参数，该参数指向数组元素自身，自命名；另外根据需要还可以有第二、第三个参数，其中常用的是第二个，指向数组元素的下标：

ar.forEach((item, key) => ...);

这里，item 是数组元素，key 是该元素的下标。省略号代表处理数组元素细节代码。

山人 发表于 2024-6-8 17:47

醉美水芙蓉 发表于 2024-6-8 17:03
欣赏老师的精彩！

美美下午好

山人 发表于 2024-6-8 17:48

红影 发表于 2024-6-8 16:55
3d边框的实例呢，这个漂亮，意境悠远。欣赏山人好帖

你可能会发现，“边框”对帖子子元素而言，是“透明”的

山人 发表于 2024-6-8 17:49

小辣椒 发表于 2024-6-8 13:03
整体效果也是漂亮

争取套用一个玩玩

马老师同意就行{:4_173:}

山人 发表于 2024-6-8 17:49

小辣椒 发表于 2024-6-8 12:59
这个标题字效果也是特棒！

感谢管管支持

樵歌 发表于 2024-6-8 20:14

小辣椒 发表于 2024-6-8 13:03
整体效果也是漂亮

争取套用一个玩玩

等你做好了，我来抄你的。{:4_185:}

樵歌 发表于 2024-6-8 20:15

震憾！和马老师不相上下！

樵歌 发表于 2024-6-8 20:17

帖子关了，音乐一直有。奇怪了。

小辣椒 发表于 2024-6-8 20:33

山人 发表于 2024-6-8 17:49
马老师同意就行

马老师是最善解人意的，肯定同意的{:4_170:}

查看完整版本: 大河悠久