论坛 › 音乐沙龙 › 《风声》（学习黑黑《另一个自己》帖子效果）

红影 发表于 2024-8-4 23:03

《风声》（学习黑黑《另一个自己》帖子效果）

<style>
#tz { margin: 80px 0 30px calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/66ae3ff5d9c307b7e90e0e2d.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#lrc { position: absolute; top: 40px; font: normal 40px \96B6\4E66; text-shadow: 1px 1px 1px white; background: linear-gradient(to right, Cyan, blue,green, Cyan); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); user-select: none; animation: swear 6s linear infinite alternate var(--state); }
#player { position: absolute; left: calc(50% - 140px); bottom: 40px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: rgba(0, 255, 255, .8); --prg: 0%; --btnSize: 120px;}
#player::before, #player::after { position: absolute; content: ''; }
#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 25px); background: url('https://pic.imgdb.cn/item/66a7b1f2d9c307b7e94c2fb0.png') no-repeat center/cover; animation: rot 6s linear infinite var(--state);}
#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
.yz { position: absolute; bottom: 130px; right: 290px; width: 72px; height: 270px; background: url('https://pic.imgdb.cn/item/66ae557ed9c307b7e92efe17.png') no-repeat center/cover; opacity：0.5; animation: flash 5.5sinfinite alternate var(--state); }
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; opacity: .2; pointer-events: none; }
.vid:nth-of-type(2) { bottom: 0; width: 100%; height: calc(100% + 60px); transform: rotate(0deg); mix-blend-mode: screen; opacity: .9; }
.wenzi { position: absolute; top: 80px; right: 460px; width: 300px; height: 420px; background: url('https://pic.imgdb.cn/item/66af30e9d9c307b7e9521025.jpg') no-repeat center/cover; filter: opacity(.35); -webkit-mask: radial-gradient(red, transparent); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
        from { transform: perspective(400px) rotateY(20deg); }
        to { transform: perspective(400px) rotateY(-20deg); }
}
@keyframes flash { to { opacity: 0.3; }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=439138683.mp3" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/05/5b4ffd401d669_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/53950850/02/22/80/643e906a7cb6f_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
        <div id="lrc">HUA CHAO PLAYER</div>
                <div class="yz"></div>
        <div class="wenzi"></div>
       
        <div id="player"></div>
</div>

<script>
        var script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
        document.body.appendChild(script);
        var lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
</script>

红影 发表于 2024-8-4 23:06

本来是把人物做遮罩的，但是原来的背景和这里的背景不合，怎么折腾都不太好，最后索性扣图不加遮罩效果。
然后把文字做遮罩，却是和背景吻合得挺好，意外之喜。{:4_173:}
谢谢@马黑黑 的代码{:4_187:}

马黑黑 发表于 2024-8-4 23:08

貌似3个 @keyframes 动画都没用上？

红影 发表于 2024-8-4 23:11

知道和喜欢握蓝，还是因了那首《星》，当时听得泪流满面，想起了爸爸。
那首想留着，做个为回忆纪念的帖子，一直留在回忆里。

红影 发表于 2024-8-4 23:12

所谓成长，不过是日复一日的沉默，
我们终于在沉默中藏起了所有心事，
也在沉默中衰老。
——转的

红影 发表于 2024-8-4 23:13

季节在陌生的地方奔跑
我听到的只是风声
遗失的东西在心中发出回音
不停地报告着远近
——转的

红影 发表于 2024-8-4 23:16

马黑黑 发表于 2024-8-4 23:08
貌似3个 @keyframes 动画都没用上？

一个播放器，一个是歌词，还一个是人物的明暗，这个明暗变化很少。

小文 发表于 2024-8-4 23:34

恩师，晚安！

马黑黑 发表于 2024-8-4 23:49

红影 发表于 2024-8-4 23:16
一个播放器，一个是歌词，还一个是人物的明暗，这个明暗变化很少。

但是CSS里设计的几个keyframes动画用上了？

起个网名好难 发表于 2024-8-5 07:23

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

竹溪 发表于 2024-8-5 08:45

漂亮，欣赏老师好帖{:4_204:}

梦油 发表于 2024-8-5 09:16

在这炎热的三伏天，我多么盼望有一缕清风吹来啊！来了，来了——《风声》来了。

南无月 发表于 2024-8-5 13:10

红影 发表于 2024-8-4 23:06
本来是把人物做遮罩的，但是原来的背景和这里的背景不合，怎么折腾都不太好，最后索性扣图不加遮罩效果。
...

文字遮罩第一次见到，影子的创意令人惊叹！
~~效果绝佳，漂亮极了。。{:4_199:}

南无月 发表于 2024-8-5 13:11

整个贴子朦胧中有神秘之色，动态视频有效烘托氛围。。
音乐好听，非常棒{:4_199:}

南无月 发表于 2024-8-5 13:12

影子的贴子无论代码还是画面，创意手法，音乐，都非常棒。。。{:4_187:}非常欣赏。。。

梦江南 发表于 2024-8-5 15:42

很棒！很棒！辛苦了！{:4_187:}

梦江南 发表于 2024-8-5 16:15

人物明暗变化还是大的。

绿叶清舟 发表于 2024-8-5 20:37

不是俺眼花吧，这歌词还会飘的，这个颜色漂亮

红影 发表于 2024-8-5 20:55

马黑黑 发表于 2024-8-4 23:49
但是CSS里设计的几个keyframes动画用上了？

好像没有了吧，就3个啊，都用了啊{:4_173:}

红影 发表于 2024-8-5 20:58

小文 发表于 2024-8-4 23:34
恩师，晚安！

问好小文，谢谢{:4_187:}

查看完整版本: 《风声》（学习黑黑《另一个自己》帖子效果）