梦风雨 发表于 2024-7-1 16:36

恋曲


<style>
#mydiv { --width: 1400px; margin: 130px 0 50px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 1000px; background: #eee url('https://bohann.net/data/attachment/forum/202407/01/162938yueu8o33pe3mw8m3.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.7); overflow: hidden; z-index: 1; position: relative;}
.ball { position: absolute; width: 120px; height: 120px; background: url(https://bohann.net/data/attachment/forum/202406/30/101325gp6ejqoji9qq4c6z.gif'') no-repeat center/cover; border-radius: 50%; opacity: 1; transition: width .5s, height .5s, opacity .5s; cursor: pointer; offset-path: path('M880 60 Q1940 360,520 520'); offset-distance: 0; animation: 6s linear forwards;}
.ball:hover { width: 45px; height: 45px; opacity: .95; }
.ball:nth-of-type(1) { left: -30px; top: 0; animation-name: move1-1;mix-blend-mode: sereen;opacity: .55;}
.ball:nth-of-type(2) { left: -15px; top: 0; width: 280px; height: 280px;background: url('https://bohann.net/data/attachment/forum/202406/21/150521xfkrs2cx7exwffuk.gif') no-repeat 50%/96%; offset-distance: 50%;mix-blend-mode: screen;}
#vid { position: absolute; width: 100%; height: 110%; top:-80px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .65;}
#vid { position: absolute; width: 100%; height: 115%; top:-80px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; opacity: .65;}
@keyframes move1-1 {
        from { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
        to { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move1-2 {
        from { offset-distance: 50%; transform: rotate(0); filter: hue-rotate(360deg); }
        to { offset-distance: 0%; transform: rotate(720deg); filter: hue-rotate(0); }
}
@keyframes move2-1 {
        from { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0deg); }
        to { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
}
@keyframes move2-2 {
        from { offset-distance: 100%; transform: rotate(0); filter: hue-rotate(360deg); }
        to { offset-distance: 50%; transform: rotate(720deg); filter: hue-rotate(0); }
}
#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="mydiv">
        <audio id="aud" src="http://storage.live.com/items/1965B2B1656C2AF6!16241?" autoplay="" loop=""></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/10/5e17dd5a329bf.mp4


" autoplay="" loop="" muted=""></video>

        <div id="b1" class="ball"></div>
        <div id="b2" class="ball"></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>


<span id="lrcStr" style="visibility: hidden;">
[
        ['0.00','恋曲1990- 罗大佑'],
        ['6.27','词：罗大佑'],
        ['12.27','曲：罗大佑'],
        ['19.27','乌溜溜的黑眼珠和你的笑脸'],
        ['27.63','怎么也难忘记你容颜的转变'],
        ['35.69','轻飘飘的旧时光就这么溜走'],
        ['44.00','转头回去看看时已匆匆数年'],
        ['52.36','苍茫茫的天涯路是你的飘泊'],
        ['60.62','寻寻觅觅长相守是我的脚步'],
        ['68.93','黑漆漆的孤枕边是你的温柔'],
        ['77.24','醒来时的清晨里是我的哀愁'],
        ['85.55','或许明日太阳西下倦鸟已归时'],
        ['93.86','你将已经踏上旧时的归途'],
        ['102.13','人生难得再次寻觅相知的伴侣'],
        ['110.39','生命终究难舍蓝蓝的白云天'],
        ['118.80','轰隆隆的雷雨声在我的窗前'],
        ['127.06','怎么也难忘记你离去的转变'],
        ['135.37','孤单单的身影后寂寥的心情'],
        ['143.93','永远无怨的是我的双眼'],
        ['144.47','永远无怨的是我的双眼'],
        ['152.63','永远无怨的是我的双眼']
];
</span>

梦油 发表于 2024-7-1 17:07

欣赏美曲，问候梦风雨。

樵歌 发表于 2024-7-1 18:17

漂亮极了，两种粒子很有特色！{:4_199:}

小辣椒 发表于 2024-7-1 20:36

风雨晚上好，这个动图和视频效果加的漂亮的，整体效果就出来了{:4_178:}

小辣椒 发表于 2024-7-1 20:37

欣赏精彩的制作，加油！{:4_171:}

梦风雨 发表于 2024-7-1 20:46

梦油 发表于 2024-7-1 17:07
欣赏美曲，问候梦风雨。

问好梦油，分享聆听。{:4_191:}

梦风雨 发表于 2024-7-1 20:47

樵歌 发表于 2024-7-1 18:17
漂亮极了，两种粒子很有特色！

问好樵歌，分享聆听歌曲。{:4_191:}

梦风雨 发表于 2024-7-1 20:48

小辣椒 发表于 2024-7-1 20:36
风雨晚上好，这个动图和视频效果加的漂亮的，整体效果就出来了

问好小辣椒分享聆听，多谢点评。{:4_191:}

红影 发表于 2024-7-1 20:49

整体效果很不错，视频粒子飘飞和文字的内容渲染出了别样的氛围。
欣赏梦风雨好帖{:4_199:}

红影 发表于 2024-7-1 20:53

看到代码里有歌词，演示时没出现，而且好像暂停也不起作用呢{:4_204:}

绿叶清舟 发表于 2024-7-1 21:28

漂亮的制作{:4_204:}

梦风雨 发表于 2024-7-1 23:09

红影 发表于 2024-7-1 20:49
整体效果很不错，视频粒子飘飞和文字的内容渲染出了别样的氛围。
欣赏梦风雨好帖

问好红影，分享聆听音乐。{:4_191:}

梦风雨 发表于 2024-7-1 23:10

红影 发表于 2024-7-1 20:53
看到代码里有歌词，演示时没出现，而且好像暂停也不起作用呢

歌词同步一点不懂。{:4_191:}

梦风雨 发表于 2024-7-1 23:10

绿叶清舟 发表于 2024-7-1 21:28
漂亮的制作

分享聆听歌曲。{:4_191:}

梦油 发表于 2024-7-2 14:43

梦风雨 发表于 2024-7-1 20:46
问好梦油，分享聆听。

梦风雨朋友别客气。

红影 发表于 2024-7-2 17:25

梦风雨 发表于 2024-7-1 23:09
问好红影，分享聆听音乐。

嗯嗯，欣赏美帖，聆听美曲{:4_187:}

红影 发表于 2024-7-2 17:26

梦风雨 发表于 2024-7-1 23:10
歌词同步一点不懂。

这些都是代码实现的，这里的人都跟着马黑黑大师在学习，梦风雨也可以一起来学习啊{:4_187:}

梦风雨 发表于 2024-7-3 21:30

红影 发表于 2024-7-2 17:26
这些都是代码实现的，这里的人都跟着马黑黑大师在学习，梦风雨也可以一起来学习啊

多谢红影的邀请学习，马黑黑大师很有水平。{:4_191:}

红影 发表于 2024-7-3 23:19

梦风雨 发表于 2024-7-3 21:30
多谢红影的邀请学习，马黑黑大师很有水平。

是啊，跟着他学习会很有收获的{:4_187:}

梦风雨 发表于 2024-7-4 10:24

红影 发表于 2024-7-3 23:19
是啊，跟着他学习会很有收获的

好的收到信息。{:4_191:}
页: [1] 2
查看完整版本: 恋曲