移动变色字[带音乐控制]
本帖最后由 亚伦影音工作室 于 2023-10-15 19:16 编辑 <br /><br /><style>#papa {margin: 10px -300px;
width: 1164px;
height: 640px;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7636499ac714e8e854f9ddf375b50085.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;
}
#bt{ color: #00ff00; position: absolute; left:3%;top:50%;font-size: 40px; font-family:华文隶书;z-index: 21; animation: wz 20s linear infinite ; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);cursor: pointer;}
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1; left: 60%;}
}
</style>
<style>
#klok{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(90deg, #ff0000 20%, #00ff80 50%, #fff000 10%, #000078 50%,#fff000 60%,#000080 70%,#00ff00 20%);
background-repeat:no-repeat;
line-height:35px;background-position: 0px 0;
-webkit-animation:loop 3slinearinfinite ;}
@-webkit-keyframes loop{
50%{background-position: -300px 0;filter:hue-rotate(0deg)contrast(120%)brightness(150%);}
}
</style>
<div id="papa">
<div id="Img"><div id="bt"><div id="klok">花潮论坛我们的快乐！</div></di></di>
<audio id="aud" src="https://www.qqmc.com/mp3/music142801.mp3" loop autoplay></audio>
</di>
<script>
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
/*控制 文字颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
bt.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script> 若有兴趣可加同步歌词！ 漂亮的变色字，谢谢亚伦老师带来的精彩{:4_187:} 亚伦影音工作室 发表于 2023-10-15 13:56
若有兴趣可加同步歌词！
哇塞~~亚伦太佩服你了，各种新效果层出不穷{:4_199:}
最近几天我没有时间玩，过几天我会玩的，你歌词同步可以做啊，我以后玩{:4_173:}
页:
[1]