制作一个汽车仪表【高手绕行】
本帖最后由 亚伦影音工作室 于 2026-3-7 19:16 编辑 <br /><br /><style>#biao{
position:relative;background:#800000 url('https://pic1.imgdb.cn/item/699e5d8b01b9a5550a584809.png') no-repeat center/85% 85%;width:600px;height: 300px;border-radius:2%;
top: 0px; left: 10%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #000;
animation:sese 6sinfinite alternate;
}
#zhen{position: absolute; transform: translate(-50%, -50%);
background:#ff0000;width:4px;height: 185px;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swin 0.4s ease-in-out infinite alternate;
}
#zhe{position: absolute; transform: translate(-50%, -50%);
background:#ff0000;width:4px;height: 185px;opacity:0;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swsw 1s ease-in-out infinite alternate;
}
#dian { width: 20px;height: 20px; background: #fff;top: 270px; left: 50%;position: absolute;
border-radius:50%;transform: translate(-50%, -50%);
}
@keyframes swin{
100%{
transform:rotate(-180deg);
}
60%{
transform:rotate(-160deg);
}
40%{
transform:rotate(-170deg);
}
0%{
transform:rotate(-140deg);
}
}
@keyframes swsw{
0%{
transform:rotate(-255deg);
}
100%{
transform:rotate(-255deg);
}
}
@keyframes sese{
0%{filter:hue-rotate(360deg)contrast(110%)brightness(90%);
}
}
</style>
<div id="biao">
<div id="zhen"></div>
<div id="zhe"></div>
<div id="dian"></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/43/ee/53/f0374f25e4f95f73ea9affe615c3e1f3/audio.mp3" loop autoplay ></audio>
<script>
biao.onclick = () => aud.paused ? (aud.play(),zhen.style.opacity= '1',zhe.style.opacity= '0') : (aud.pause(),zhen.style.opacity= '0',zhe.style.opacity= '1');
</script> 漂亮的汽车仪表，谢谢亚伦老师精心制作{:4_176:} 真漂亮，还是变色的呢。欣赏亚伦老师好帖{:4_199:} 亚纶也是非常努力的人，这个纯代码编辑的指针，赞的~~~{:4_178:}
页:
[1]