就让这大雨全都落下（马黑黑原创）
本帖最后由 朵拉 于 2023-5-25 20:38 编辑 <br /><br /><css-doodle grid="30" id="mplayer">:doodle {
@size: 1024px 683px;
background: #000 url('https://pic1.imgdb.cn/item/646f5636f024cca173ca1c20.jpg');
box-shadow: 0 0 8px #000;
position: relative;
z-index: 1;
margin: 0 0 0 calc(50% - 593px);
}
@match(i ≤ @size - 2) {
@size: @r(1,2)px @r(10,60)px;
@place: @r(0,1024)px -100px;
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3));
animation: fall @r(.5,1.5)s @r(-4,0)s infinite linear var(--state);
}
@nth(@size - 1, @size) {
@size: 100px;
@place: 340px 300px;
clip-path: @shape(
fill: evenodd;
points: 50;
scale: .45;
x: cos(2t) + cos(π - 7t);
y: sin(2t) + sin(7t);
);
background: tan;
cursor: pointer;
animation: rot 4s infinite linear var(--state);
}
@nth(@size) { @place: 788px 160px; }
@keyframes fall { to { transform: translateY(783px); } }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/03/05/25d96df991b62fcd21c0f954b568060b.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> @马黑黑
马师 晚上好，学生交作业，请指正{:4_190:} 这两个转动的按钮倒是可以调一下颜色的。欣赏朵宝好帖{:4_204:} 朵拉 发表于 2023-5-25 20:39
@马黑黑
马师 晚上好，学生交作业，请指正
好漂亮的雨 也腻害啊
页:
[1]