点星

马黑黑 · 发表于 2023-6-16 19:53

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

:doodle { @size: 1242px 699px; position: relative; background: url('https://638183.freep.cn/638183/t23/webp1/dmxk15.webp'); box-shadow: 0 0 8px #000; opacity: .95; z-index: 1; margin: 0 0 0 calc(50% - 702px); --state: paused; } @nth(1) { @size: 100px; @shape: hypocycloid 4; @place: 50% 160px; background: radial-gradient(transparent, rgba(0,0,100,.8), rgba(255,255,255,.6)); cursor: pointer; z-index: @size; animation: rot 6s infinite linear var(--state); } @match(i ≥ 2) { @size: @r(2,10)px; @shape: hypocycloid 4; @place: @r(20, 1242)px @r(0,200)px; background: #909ccb; opacity: .8; transform: rotate(-30deg); animation: flash .5s @r(-1)s infinite alternate; } @keyframes rot { to { transform: rotate(360deg); } } @keyframes flash { to { transform: rotate(30deg); opacity: 0; } }

岩新新 · 发表于 2023-6-16 19:55

欣赏点赞！

马黑黑 · 发表于 2023-6-16 19:57

帖子代码

<css-doodle grid="10" id="mplayer">
:doodle {
@size: 1242px 699px;
position: relative;
background: url('https://638183.freep.cn/638183/t23/webp1/dmxk15.webp');
box-shadow: 0 0 8px #000;
opacity: .95;
z-index: 1;
margin: 0 0 0 calc(50% - 540px);
--state: paused;
}
@nth(1) {
@size: 100px;
@shape: hypocycloid 4;
@place: 50% 160px;
background: radial-gradient(transparent, rgba(0,0,100,.8), rgba(255,255,255,.6));
cursor: pointer;
z-index: @size;
animation: rot 6s infinite linear var(--state);
}
@match(i ≥ 2) {
@size: @r(2,10)px;
@shape: hypocycloid 4;
@place: @r(20, 1242)px @r(0,200)px;
background: #909ccb;
opacity: .8;
transform: rotate(-30deg);
animation: flash .5s @r(-1)s infinite alternate;
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes flash { to { transform: rotate(30deg); opacity: 0; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=505688656" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.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);
window.onload = () => {
let btn = mplayer.shadowRoot.querySelector('cell');
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
}
})();
</script>