亚伦影音工作室 发表于 2026-3-7 18:37

制作一个代码可控喇叭【高手绕行】

本帖最后由 亚伦影音工作室 于 2026-3-7 19:20 编辑 <br /><br /><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>

杨帆 发表于 2026-3-7 20:57

效果逼真，谢谢亚伦老师再创新作{:4_176:}

红影 发表于 2026-3-7 22:13

非常漂亮，虽然只是喇叭的动态，感觉像在跟音乐呼应一样，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-3-8 14:58

支持亚纶，一个个研究出来了{:4_178:}
页: [1]
查看完整版本: 制作一个代码可控喇叭【高手绕行】