用代码制作一个动画喇叭
本帖最后由 亚伦影音工作室 于 2025-6-4 19:36 编辑 <br /><br /> <style type="text/css">#lb{ margin: 30px30px ; background:#0000;width: 90px; height: 90px;overflow:hidden;position: relative; }
#lk { left: 20px; top:20px;background:#000;width: 50px; height: 50px;clip-path: polygon(20% 30%, 50% 0, 50% 100%, 20% 70%, 0% 70%, 0% 30%);position: absolute; }
.box {
width: 120px;
height: 120px;
box-sizing: border-box;
position: absolute;
left: 50px; top:20px;
}
.wifi-symbol {
width: 50px;
height: 50px;
box-sizing: border-box;
overflow: hidden;
transform: rotate(135deg);
}
.wifi-circle {
border: 5px solid #000;
border-radius: 50%;
position: absolute;
}
.first {
width: 5px;
height: 5px;
background: #cccccc;
top: 45px;
left: 45px;
}
.second {
width: 25px;
height: 25px;
top: 35px;
left: 35px;
animation: fadeInOut 1s infinite 0.2s;.
}
.third {
width: 40px;
height: 40px;
top: 25px;
left: 25px;
animation: fadeInOut 1s infinite 0.4s;
}
.mhird {
width: 55px;
height: 55px;
top: 15px;
left: 15px;
animation: fadeInOut 1s infinite 0.5s;
}
@keyframes fadeInOut {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
</style>
<div id="lb">
<div id="lk"></div>
<div class="box">
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle mhird"></div>
</div>
</div>
</div>
这个漂亮，欣赏亚伦老师好制作{:4_199:} 谢谢亚伦老师精彩分享{:4_191:}
喇叭控制音乐
本帖最后由 亚伦影音工作室 于 2025-6-4 23:00 编辑 <br /><br /> <style >#lbb{ margin: 30px30px ; background:#0000;width: 90px; height: 90px;overflow:hidden;position: relative;--state: running; transform:scale(.8); }
#lkk { left: 20px; top:20px;background:#880000;width: 50px; height: 50px;clip-path: polygon(5% 25%, 5% 75%, 25% 76%, 25% 25%, 27% 25%, 27% 76%, 27% 76%, 61% 100%, 60% 0, 27% 25%);position: absolute; }
#jinyin{ left: 55px; top:35px;background:#880000;width: 16px; height: 25px;clip-path: polygon(10% 0, 0 10%, 40% 50%, 0 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0, 50% 40%); position: absolute;opacity:0;}
#boxx { width: 120px;height: 120px;box-sizing: border-box;position: absolute;left: 55px; top:20px;}
.yy-symboll {width: 50px;height: 50px;box-sizing: border-box;overflow: hidden;transform: rotate(135deg);}
.yy-circlee {border: 5px solid #880000;border-radius: 50%;position: absolute;}
.firstt {width: 5px;height: 5px;background: #00ff00;top: 45px;left: 45px;}
.secondd {width: 25px; height: 25px;top: 35px;left: 35px;animation: fadeInOutt 1s infinite 0.2s var(--state);.}
.thirdd { width: 40px;height: 40px;top: 25px;left: 25px;animation: fadeInOutt 1s infinite 0.4s var(--state);}
.mhirdd {width: 55px;height: 55px;top: 15px;left: 15px;animation: fadeInOutt 1s infinite 0.5s var(--state);}
@keyframes fadeInOutt { 0% {opacity: 0;}100% {opacity: 1;}}
</style>
<div id="lbb">
<div id="lkk"></div>
<div id="boxx">
<div class="yy-symboll">
<div class="yy-circlee firstt"></div>
<div class="yy-circlee secondd"></div>
<div class="yy-circlee thirdd"></div>
<div class="yy-circlee mhirdd"></div>
</div>
</div>
<div id="jinyin"></div>
</div>
<audio src="https://img1.oldkids.cn/upload/2025/03/01/blog_260848378_20250301154547926.mp3" id="aud"autoplay></audio>
<script>
lbb.onclick = () => aud.paused ? (aud.play(),jinyin.style.opacity= '0',boxx.style.opacity = '1'): (aud.pause(),jinyin.style.opacity= '1',boxx.style.opacity = '0');
mState = () => {lbb.style.setProperty('--state', aud.paused ? 'paused' : 'running');}
aud.onplaying = aud.onpause = () => mState();
</script> 欣赏佳作，问候亚伦。 估计小辣椒会喜欢的{:4_170:}
页:
[1]