小城夏天（马黑黑原创）
本帖最后由 朵拉 于 2023-5-15 23:22 编辑 <br /><br /><css-doodle grid="1x3" id="mplayer">:doodle {
@size: 1024px 640px;
background: url('https://pic2.imgdb.cn/item/64624b180d2dde577786d629.webp') no-repeat center/cover;
pointer-events: none;
margin: -80px 0 0 calc(50% - 593px);
box-shadow: 0 0 8px #000;
--state: paused;
}
@size: 200px;
@place: center 120px;
cursor: pointer;
pointer-events: auto;
@at(1,1) {
background: gray linear-gradient(red,green,red);
clip-path: @shape(
points: 300;
frame: 60;
scale: .65;
r: abs.cos(9t) ^ cos(9t);
);
animation: rot 6s infinite linear var(--state);
}
@at(1,2) {
@size: 100px;
@place: 360px 420px;
background: linear-gradient(silver,lightgreen);
clip-path: @shape(
points: 720;
scale: .4 .3;
-y: cos(5t) + cos(3t) + cos(5t);
x: sin(3t) + sin(3/t) + sin(2t);
);
transform-origin: bottom bottom;
animation: swing .5s infinite alternate linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1934251776" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/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_187:} 漂亮的制作。欣赏朵宝好帖{:4_187:}
页:
[1]