来自我们的声音
<css-doodle grid="20" id="mplayer">:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/2/rc01.jpg') no-repeat center/cover, radial-gradient(black, blue);
background-blend-mode: lighten;
box-shadow: 0 0 8px 0 #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@size: @r(4, 8)px;
@place: 390px 360px;
border-radius: 50%;
background: rgba(@m3(@r(222)), @r(.7, 1));
animation: fly @r(6,16)s @r(-6,0)s infinite linear var(--state);
@nth(@size) {
@size: 100px;
@shape: bud 5;
background: rgba(50,50,250,.7);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes fly {
0% { transform: perspective(800px) rotate(0) translate3d(0, 0, 0); }
100% { transform: perspective(800px) rotate(@p(-720, 720)deg) translate3d(var(--rx), var(--ry), var(--rz)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
--rx: @r(10,50)px; --ry: @r(10,80)px; --rz: @r(20,800)px;
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1875226179" 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);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
帖子代码
<css-doodle grid="20" id="mplayer">
:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/2/rc01.jpg') no-repeat center/cover, radial-gradient(black, blue);
background-blend-mode: lighten;
box-shadow: 0 0 8px 0 #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@size: @r(4, 8)px;
@place: 390px 360px;
border-radius: 50%;
background: rgba(@m3(@r(222)), @r(.7, 1));
animation: fly @r(6,16)s @r(-6,0)s infinite linear var(--state);
@nth(@size) {
@size: 100px;
@shape: bud 5;
background: rgba(50,50,250,.7);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes fly {
0% { transform: perspective(800px) rotate(0) translate3d(0, 0, 0); }
100% { transform: perspective(800px) rotate(@p(-720, 720)deg) translate3d(var(--rx), var(--ry), var(--rz)); }
}
@keyframes rot { to { transform: rotate(360deg); } }
--rx: @r(10,50)px; --ry: @r(10,80)px; --rz: @r(20,800)px;
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1875226179" 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);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
更密集的粒子效果，背景造型很奇特 南无月 发表于 2023-5-19 12:40
更密集的粒子效果，背景造型很奇特
中下午好 马黑黑 发表于 2023-5-19 12:43
中下午好
吃完中饭就是下午。没吃中饭就是上午。同一个时间点，可能是上午可能上午和下午 敲手鼓，有点独特 樵歌 发表于 2023-5-19 12:48
敲手鼓，有点独特
下中午好 南无月 发表于 2023-5-19 12:47
吃完中饭就是下午。没吃中饭就是上午。同一个时间点，可能是上午可能上午和下午
所以我说完后，你自己选一个接受问候就行 这个背景的图片好奇特，粒子是3D变化的，漂亮。欣赏黑黑好帖{:4_199:} 本来播放器按钮和粒子的旋转时间不同，但是帖子里的效果看着速度很一致呢。真奇特{:4_204:} 五彩缤纷，好看极了 老师的分享真棒，感谢分享！{:4_204:} 这是哪里啊？鬼斧神工的美景令人向往。 问好马黑黑老师，欣赏收藏学习了！{:4_190:} 马黑黑 发表于 2023-5-19 13:05
所以我说完后，你自己选一个接受问候就行
不选了，费事{:4_170:} 南无月 发表于 2023-5-19 17:56
不选了，费事
那就抛硬币 亦是金 发表于 2023-5-19 17:43
问好马黑黑老师，欣赏收藏学习了！
晚上好 红影 发表于 2023-5-19 13:10
这个背景的图片好奇特，粒子是3D变化的，漂亮。欣赏黑黑好帖
自然界的景象总是足够丰富的 梦油 发表于 2023-5-19 16:58
这是哪里啊？鬼斧神工的美景令人向往。
这是想象的景象，不过，如果你到过桂林，你会发现有相似的地方 红影 发表于 2023-5-19 13:12
本来播放器按钮和粒子的旋转时间不同，但是帖子里的效果看着速度很一致呢。真奇特
按钮做 2d 旋转，例子做3d旋转。二者在2d视角，运动形态基本一致。