醉美水芙蓉 发表于 5 天前

亚伦制作一个代码可控喇叭


<style>
#ba{
    position:relative;background:#eee url('https://pic1.imgdb.cn/item/69abf9973dbab1ba32d6f113.png') no-repeat center/100%;width:200px;height: 200px;border-radius:2%;
top: 0px; left: 10%;

}
#laba{position: absolute; transform: translatex(-50%);
    background:url('https://pic1.imgdb.cn/item/69abf5b03dbab1ba32d6bd4d.png') no-repeat 0px 0px/100% 100%;width:150px;height: 150px;
top: 26px; left: 23px;text-align: center;cursor: pointer;
animation:sin 0.6sinfinite alternate;
}

@keyframes sin{
100%{
    transform:scale(1);
}
    40%{
    transform:scale(1.02);
}


0%{
    transform:scale(1);
}
}

</style>
<div id="ba">
<div id="laba"></div>

</div>
    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/94/1a/04/c5823a620bde777fc9d42157377b74d3/audio.mp3" loop autoplay ></audio>
    <script>
laba.style.animationPlayState = aud.paused ? 'running': 'paused';
laba.onclick = () => aud.paused ? (aud.play(),laba.style.animationPlayState = 'running') : (aud.pause(),laba.style.animationPlayState = 'paused');
       </script>

klxf 发表于 4 天前

漂亮的代码可控喇叭，谢谢分享

醉美水芙蓉 发表于 4 天前

klxf 发表于 2026-3-8 19:01
漂亮的代码可控喇叭，谢谢分享

谢谢友友光临！

jinruping 发表于 3 天前

支持博主，分享超级出色
页: [1]
查看完整版本: 亚伦制作一个代码可控喇叭