《祝你一路顺风》TO花飞飞（学习黑黑水波纹按钮）
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/64dc394b661c6c8e54038d40.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#laba, #laba1{ position: absolute; left: 291px; bottom: 61px; width: 136px; height: 136px;border-radius: 50%;background: gray radial-gradient(DimGray, DarkGray, DimGray, Black );
animation: shan 1s infinite alternate var(--state); }
#laba1 {left: 603px;}
#xiao, #xiao1{ position: absolute; left: 282px; bottom: 203px; width: 42px; height: 23px;border-radius: 23px;background: gray radial-gradient(DimGray, Peru, Black );
animation: shan1 2s infinite alternate var(--state); }
#xiao1 {left: 705px;}
#cidai, #cidai1{ position: absolute; left: 474px; bottom: 160px; width: 30px; height: 30px;border-radius: 50%; display: grid; place-items: center; background: gray radial-gradient(Black, DarkGray, blue );
animation: rot 5s infinite linear var(--state);}
#cidai1 {left: 525px;}
#cidai::before, #cidai1::before { position: absolute; content: ''; width: 8px; height: 8px; border-radius: 50%; border: 3px dotted rgba(250,250,250,.7); }
@keyframes shan{ from { opacity: .5; } to { opacity: .1; } }
@keyframes shan1{ from { opacity: 1; } to { opacity: .1; } }
@keyframes rot { to { transform: rotate(1turn); } }
#pic {
position: absolute;
left: 20px;
top: 70px;
width: 300px;
height: 205px;
-webkit-mask-image:radial-gradient(black 65%, transparent 30%);
opacity: 0.95;
}
</style>
<div id="papa">
<img id="pic" src="https://pic.imgdb.cn/item/64dcab97661c6c8e545fd2e2.gif" alt="" />
<div id="laba"></div><div id="laba1"></div><div id="xiao"></div><div id="xiao1"></div>
<div id="cidai"></div><div id="cidai1"></div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/07/19/d7a98b4f733bfe1be65a4d374f1b2955.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/ewave_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
`,
player_css: `
top: 90px;
transform: rotate(45deg); /* 播放器旋转 */
--bg: rgb(100,200,250,.75);
--br: 20%; /* 圆角设置 50%为圆形，0% 为矩形 */
`,
fs_css: `left: -100px;`,
});
}
})();
</script> 我知道你有千言你有万语
却不肯说出口
你知道我好担心我好难过
却不敢说出口
看到飞飞的告别帖，做个送别帖给飞飞，愿你诸事顺利，早日归来@花飞飞{:4_187:} @马黑黑我把《你的直觉》里一闪一闪的效果弄到录音机上去了。弄了两处{:4_173:}
还把卡带的转动也弄进去了。 为了让录音机大点，能看到效果，只能占了歌手的位置，然后把歌手的镜头放旁边去了。对不起歌手{:4_173:} 正好在电视节目开门大吉里听到这首歌，用来送给飞飞正好呢。也借机学了一下代码。
弄那个闪光位置好麻烦，尤其那两个小的。磁带上的转动倒是巧了，一下子就调到位了。 红影 发表于 2023-8-16 19:47
@马黑黑我把《你的直觉》里一闪一闪的效果弄到录音机上去了。弄了两处
还把卡带的转动也弄进去 ...
太惊艳了{:4_199:} 亲爱的，太棒了~~~{:4_178:} 这些效果合一起，老式卡带机真实出现了{:4_199:} @冬天的雨
冬雨学习做一个{:4_170:} 小辣椒 发表于 2023-8-16 21:09
@冬天的雨
冬雨学习做一个
冬雨看都看不懂，不会做{:4_203:} 这个水波纹播放器可以学习做一次，但最近没有时间 冬天的雨 发表于 2023-8-16 21:10
这个水波纹播放器可以学习做一次，但最近没有时间
刚好，千千葵歌用这个水波纹播放器{:4_173:} 小辣椒 发表于 2023-8-16 21:11
刚好，千千葵歌用这个水波纹播放器
算了，算了，我怕你了，溜。。。。。 冬天的雨 发表于 2023-8-16 21:12
算了，算了，我怕你了，溜。。。。。
好吧，随便你什么播放器做一首翻就可以了 马黑黑 发表于 2023-8-16 20:54
太惊艳了
本来就是你的代码啊，要惊艳也是你惊艳{:4_173:} 小辣椒 发表于 2023-8-16 21:06
亲爱的，太棒了~~~
找了个录音机，把黑黑的效果都弄上去了{:4_173:} 小辣椒 发表于 2023-8-16 21:08
这些效果合一起，老式卡带机真实出现了
还缺上面的两个小框里弄两个红色小指针一摇一摇的会更好，可惜不知道怎么弄出来了{:4_173:} 冬天的雨 发表于 2023-8-16 21:10
这个水波纹播放器可以学习做一次，但最近没有时间
这个水波纹是黑黑打包好的，用起来特别方便。 红影 发表于 2023-8-16 21:36
找了个录音机，把黑黑的效果都弄上去了
不错，很漂亮的制作 红影 发表于 2023-8-16 21:35
本来就是你的代码啊，要惊艳也是你惊艳
代码只是实现基本的特定功能