开往早晨的午夜 TO:朋友们周末愉快!
<css-doodle grid="20" id="mplayer">:doodle {
@size: 1024px 640px;
background: url('https://pic1.imgdb.cn/item/6470b3b8f024cca173c89540.webp') 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: 90px 60px;
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=2049804421" 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> 问好朵拉!好久不见。先上茶{:3_236:} 打开页面看到是代码,没有画面,不知道是编辑问题还是浏览器问题,换个时间再来欣赏~~ 来欣赏朵拉的精美制作啦,好听好看,欣赏点赞{:3_248:} 问好朵拉,谢谢对论坛的支持,祝你和所有的朋友们周末好心情,天天开心{:2_124:}{:2_124:} 果然是俺浏览器的问题,换个浏览器显示了,漂亮! 新颖的风格,炫酷的特效! 画面唯美,选材贴切,明暗处理凸显表达技巧,特效叠加更是锦上添花! 感谢朵拉精彩分享!欣赏点赞送花花{:3_268:}{:4_219:}{:4_219:}{:4_219:}{:2_129:} 欣赏老师的 佳作
页:
[1]