不用js
本帖最后由 亚伦影音工作室 于 2025-10-13 22:01 编辑 <br /><br /><style>#papa {margin: 20px auto;
width: 700px;
height: 400px;
border: 0px solid gray;
display: grid;
place-items: center;
position: relative;
--state: running;
}
#player {position: absolute;
width: 350px;
height: 350px;
display: grid;
place-items: center;
animation: rot 10s linear infinite var(--state);
}
@keyframes rot {to { transform: rotate(-360deg);filter: hue-rotate(360deg); }}
#rect3 {position: absolute;
width:20%;
height: 55%;
background: #880000;
clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
-webkit-clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
}
#rect1 {position: absolute; transform: rotate(60deg);width:20%;
height: 55%;background: #fff000;overflow: hidden;clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
-webkit-clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);}
#rect2 {position: absolute; transform: rotate(120deg);
width:20%;
height: 55%;background: #00aa00;overflow: hidden;clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
-webkit-clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);}
</style>
<div id="papa">
<div id="player">
<div id="rect3"></div>
<div id="rect1"></div>
<div id="rect2"></div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/20/88/58/254f4814085859f82d2b6d1c3a3f5178/audio.mp3" loop autoplay></audio>
<script>
player.onclick = () => aud.paused ? (aud.play(),paused) :( aud.pause(),running);
mState = () => papa.style.setProperty('--state',aud.paused ? 'paused' : 'running');
aud.onplaying = aud.onpause = () => mState();
</script>
漂亮，精致，绚丽，谢谢亚伦老师经典分享{:4_176:} 这个只有2次旋转就可以，当需要旋转的叶瓣多了，还是有 jｓ来生成更方便呢{:4_204:} 红影 发表于 2025-10-13 19:40
这个只有2次旋转就可以，当需要旋转的叶瓣多了，还是有 jｓ来生成更方便呢
如果多手动再加，我这是最笨的方法！惭愧！ 这个让小播变色可真漂亮．没有ｊｓ也挺好，怕这个的不用怕了{:4_173:} 亚伦影音工作室 发表于 2025-10-13 19:44
如果多手动再加，我这是最笨的方法！惭愧！
能做出来就很厉害啊，这个有什么惭愧的，我还做不出呢{:4_187:}
页:
[1]