<style>
#papa {
margin: 0 0 0 calc(50% - 531px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/05/17/p9R7LJP.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
css-doodle { position: absolute; }
</style>


<div id="papa">
<!-- 播放器 -->
<css-doodle grid="1" id="mplayer">
:doodle { @size: 100px; cursor: pointer; right: 100px; bottom: 100px; z-index: 4; }
clip-path: @shape(
fill: evenodd;
points: 200;
scale: .3; x: 2 * sin(t) + sin(7t); y: 2 * cos(t) + cos(7t);
);
background: lightblue;
animation: rot 6s infinite linear var(--state);
@keyframes rot { to { transform: rotate(360deg); }}
</css-doodle>
<!-- 文本 -->
<css-doodle grid="6x7"click-to-update="">
:doodle {
@size: 240px 300px;
left: 120px;
top: 130px;
cursor: pointer;
z-index: 3;
}
@size: 50px;
@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
font: normal 30px / 40px sans-serif;
color:yellow;
text-shadow: 1px 1px 2px #000;
opacity: 0;
:before {
content: @pn([独立寒秋， 湘江北去， 橘子洲头。 看万山红遍，层林尽染；  漫江碧透，  百舸争流……]);
}
animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);
@keyframes show { to { opacity: 1; } }
</css-doodle>
<!-- 粒子 -->
<css-doodle grid="40x1">
:doodle { @size: 1024px 640px; perspective: 300px; }
:container { transform-style: preserve-3d; }
background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);
@size: 30%;
@place-cell: center;
border-radius: 50%;
animation: scale-up 15s calc(@i * -.6s) linear infinite var(--state);
@keyframes scale-up {
0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
10% { opacity: 1; }
95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); }
100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }
}
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307601266" autoplay="autoplay" loop="loop"></audio>


<script>
(function() {
let script = document.createElement('script');
script.src = '../api/css-doodle.js';
document.head.appendChild(script);
let mState = () => papa.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>

前一篇: 七彩花
下一篇: 《工业风》修正代码