still

马黑黑 · 发表于 2023-4-20 20:09

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

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

x

:doodle { @grid: 4 / 200px; background: url('https://638183.freep.cn/638183/t23/btn/laba1.png') no-repeat 0px 50px / 100px 100px; cursor: pointer; position: absolute; left: 700px; top: 150px; --state: running; } :doodle(:hover) { transform: skew(2deg); } position: absolute; @place-cell: 80px 46%; :after { content: @p(♫,♪,♩,♬); color: @p(red,pink,orange,green,blue,white); } animation: fly 1s @r(-2,2)s infinite var(--state); @keyframes fly { from { transform: rotate(0deg) translate(0px); } to { transform: rotate(@r(-60,60)deg) translate(110px); } }

马黑黑 · 发表于 2023-4-20 20:10

帖子代码

<style>
#mydiv {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 672px;
background: #000 url('https://638183.freep.cn/638183/t23/1/qbui.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
position: relative;
}
</style>
<div id="mydiv">
<css-doodle id="mplayer">
:doodle {
@grid: 4 / 200px;
background: url('https://638183.freep.cn/638183/t23/btn/laba1.png') no-repeat 0px 50px / 100px 100px;
cursor: pointer;
position: absolute;
left: 700px;
top: 150px;
--state: running;
}
:doodle(:hover) { transform: skew(2deg); }
position: absolute;
@place-cell: 80px 46%;
:after {
content: @p(♫,♪,♩,♬);
color: @p(red,pink,orange,green,blue,white);
}
animation: fly 1s @r(-2,2)s infinite var(--state);
@keyframes fly {
from { transform: rotate(0deg) translate(0px); }
to { transform: rotate(@r(-60,60)deg) translate(110px); }
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=30375354" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
(function() {
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
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>