【雨声音画】陌上花开
<DIV style="LEFT: -260px; WIDTH: 1600px; POSITION: relative; TOP: 120px">
<style>
#mydiv {
margin: -80px 0 0 calc(50% - 900px);
width: 1900px;
height: 800px;
background: #000 url('http://www.bohann.net/data/attachment/forum/202311/19/152614fagaugauusdggzvx.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: 500px;
top: 230px;
--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=1341285519" 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>
祝友友们周末快乐！{:10_403:} 我第一个来欣赏{:10_402:} 可以摇一摇啊{:9005:} 小喇叭还蛮独特的{:10_402:} {:9017:}小喇叭真好看 雨声 发表于 2023-11-19 16:30
祝友友们周末快乐！
雨声姐姐好！
蜻蜓 发表于 2023-11-19 16:35
我第一个来欣赏
谢谢美妞欣赏支持，抱一下。
悦儿 发表于 2023-11-19 16:37
小喇叭真好看
小播放器感谢觉好看，弄着玩{:9001:}
雨声 发表于 2023-11-19 16:39
谢谢美妞欣赏支持，抱一下。
我就喜欢看音画，哈哈哈