谁能禁止我的爱（醉人的双吉他演奏）TO：走过岁月
<style>.outer { left:-360px; width: 1300px; height: 750px; top: 150px; background: darkred url('https://wj.zp68.com/lxx/yunhua/2023/03/28/7F.gif') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
.sky { position: absolute; width:1300px; inherit; height: 200px;left: 0px;top: 10px; background: url('https://pic.imgdb.cn/item/6422d696a682492fccd82792.png'); animation: cloud_fly 40s linear infinite;}
.outer meter { position: absolute; width: 100px; left: 50px; left: 280px;top: 410px;bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 290px; bottom: 110px; width: 80px; height: 10px; top: 360px;background: green; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left:calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px;background: darkgreen; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
.txtBg {
position: absolute;
left: 640px;
top: 90px;
font-size: 3.5rem;
color: transparent;
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg,green, olive, tomato, green);
background-size: 600px 100px;
background-position: 600px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
</style>
<div class="outer">
<div class="txtBg">谁能禁止我的爱</div>
<img src="https://pic.imgdb.cn/item/6421e69ba682492fcc845219.png" alt="" style="position: absolute; left: 750px; top:130px;mix-blend-mode: multiply; transform: translate(30px, 40px) rotate(360deg); " />
<div class="sky"></div>
<meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div class="btn"></div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20240212144428.mp3" autoplay="autoplay" loop="loop"></audio></div>
<script>
let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');
aud.addEventListener('timeupdate', () => {
meter.value = aud.currentTime / aud.duration * 100;
});
btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');
</script> </div>
</div>
<br><br><br><br><br><br><br><br><br><br> @走过岁月
岁月同做一个海潮效果，换了一首你以前分享的纯音乐，特别好听的双吉他演奏 @马黑黑
黑黑，这个变色效果的文字我晕S了，不晓得少了那句语句，效果不一样了，捣鼓好久时间，还是这样{:4_203:} 来欣赏了 小辣椒加很多特效，可是个大工程 走过岁月 发表于 2023-3-28 20:51
来欣赏了
这个播放器感觉放山坡上比较合适，就用了这个吹风的 小辣椒想象力丰富，做得很不错 走过岁月 发表于 2023-3-28 20:52
小辣椒加很多特效，可是个大工程
这个我分几天做好的，断断续续的总算完成了，我加了海浪的效果 谢谢小辣椒的礼物，开心{:4_179:} 走过岁月 发表于 2023-3-28 20:54
谢谢小辣椒的礼物，开心
老谢，不客气，你原创制作的才辛苦的 走过岁月 发表于 2023-3-28 20:54
谢谢小辣椒的礼物，开心
看见你今天都谢了好几次的{:4_170:} 小辣椒 发表于 2023-3-28 20:43
@马黑黑
黑黑，这个变色效果的文字我晕S了，不晓得少了那句语句，效果不一样了，捣鼓好久时间，还是这 ...
.txtbg {...} 里的这一句：
background-image: linear-gradient(90deg,green, olive, transparent, tomato, green);
把透明色去掉就好
小辣椒 发表于 2023-3-28 20:56
看见你今天都谢了好几次的
光谢不行，送你一个 走过岁月 发表于 2023-3-28 20:54
小辣椒想象力丰富，做得很不错
就喜欢玩你的粒子效果，最近几年下来我都玩了几十个了，谢谢岁月一直的包容，从来都是鼓励，哈哈~~~{:4_179:} 走过岁月 发表于 2023-3-28 20:59
光谢不行，送你一个
不急，我没有做的还有许多 马黑黑 发表于 2023-3-28 20:57
.txtbg {...} 里的这一句：
background-image: linear-gradient(90deg,green, olive, transparent,...
好的，我去修改 小辣椒 发表于 2023-3-28 21:03
好的，我去修改
{:4_190:} 马黑黑 发表于 2023-3-28 21:03
黑黑和原来的效果还是不一样
https://www.huachaowang.com/forum.php?mod=viewthread&tid=67414
小辣椒 发表于 2023-3-28 21:05
黑黑和原来的效果还是不一样
各有各的效果 马黑黑 发表于 2023-3-28 21:05
各有各的效果
黑黑，你回帖的速度真的太快了{:4_189:}