何以歌
<css-doodle grid="2" id="mplayer">:doodle {
@size: 1280px 689px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp1/lohx.webp');
box-shadow: 0 0 8px #000;
position: relative;
margin: 0 0 0 calc(50% - 721px);
z-index: 1;
--state: paused;
}
position: absolute;
@nth(1) {
@place: 50% 10%;
@size: 80px;
:after {
@size: 100%;
@shape: windmill;
content: '';
background: radial-gradient(rgba(100,100,100,.3), rgba(0,0,100,.6));
}
cursor: pointer;
z-index: calc(@size + 1);
animation: rot 6s infinite linear var(--state);
}
@nth(2) {
@size: 100%;
background: @doodle(
@grid: 10 / 100%;
@place: @r(0,100)% -10%;
:after {
content: '@p(🌸,❀,🏵️,🌺,❄️,💮,🍃)';
animation: rot 4s infinite linear;
font-size: @r(15,30)px;
}
animation: fly @r(30,50)s @r(0,-30)s infinite;
@keyframes rot { to { transform: rotate(@p(-360,360)deg); } }
@keyframes fly {
from { transform: rotate(0deg) translateY(0); opacity: .9;}
to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }
}
);
}
@nth(3,4) {
@place: 90% 95%;
font-size: 4em;
:after {content: '🐇'}
}
@nth(4){ transform: translate(20px); }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=572493976" 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>
帖子代码
<css-doodle grid="2" id="mplayer">
:doodle {
@size: 1280px 689px;
background: lightblue url('https://638183.freep.cn/638183/t23/webp1/lohx.webp');
box-shadow: 0 0 8px #000;
position: relative;
margin: 30px auto;
--state: paused;
}
position: absolute;
@nth(1) {
@place: 50% 10%;
@size: 80px;
:after {
@size: 100%;
@shape: windmill;
content: '';
background: radial-gradient(rgba(100,100,100,.3), rgba(0,0,100,.6));
}
cursor: pointer;
z-index: calc(@size + 1);
animation: rot 6s infinite linear var(--state);
}
@nth(2) {
@size: 100%;
background: @doodle(
@grid: 10 / 100%;
@place: @r(0,100)% -10%;
:after {
content: '@p(🌸,❀,🏵️,🌺,❄️,💮,🍃)';
animation: rot 4s infinite linear;
font-size: @r(15,30)px;
}
animation: fly @r(30,50)s @r(0,-30)s infinite;
@keyframes rot { to { transform: rotate(@p(-360,360)deg); } }
@keyframes fly {
from { transform: rotate(0deg) translateY(0); opacity: .9;}
to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }
}
);
}
@nth(3,4) {
@place: 90% 95%;
font-size: 4em;
:after {content: '🐇'}
}
@nth(4){ transform: translate(20px); }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=572493976" 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>
本帖最后由 马黑黑 于 2023-6-13 12:42 编辑
简单解释（待编辑）
单元格一：@nth(1) {...}
做播放器控制器，需要提升层级（z-index），以便顺利接受点击操作。JS代码里的 window.onload = () => {...} 基于它。
单元格二：@nth(2) {...}
做背景动图，落花就是通过它实现的。尺寸与父元素一样（@size: 100%;）。内嵌一组 css-doodle 代码做该单元格的 background 背景，内嵌的css-doodle与外界隔离，不会接受所在单元格（或父元素）之外的关键帧动画，故此两个关键帧动画设置在该单元格内，这些动画也不受单元格外部变量控制。
若需要全景动画可控，内嵌css-doodle不是好方法，所有动画背景的元素应采用与播放控制器所在单元格一样的层级即兄弟关系。
单元格三和四：@nth(3，4) {...}
右下角那两只傍地走的小白兔（谁能分出雌雄？）。它们要错开一点点，所以单独又设置一下 @nth(4) {...}。
【注】单元格二也可以不要，将内容集成到父元素的 background 属性中，需要设置 background-blend-mode 即可。
这么多落花，右下角还有一对兔子。还是头一次看到黑黑做这样风格的帖子呢，古色古香的，漂亮{:4_199:} 因为嵌套的单元格里的内容不受外部影响，为了证明，黑黑特地设置了不止一个的 rot 动画名吧{:4_173:} z-index: calc(@size + 1); 这个为什么这样取，直接取数字也可以的吧，比如10或20 ？ 背景高度才689px; 黑黑设置到达800px 才变成opacity: 0 ，是怕太快看不到那些花朵吧，也可以设置到达底端变成0.2之类的，应该效果差不多吧{:4_173:} 马黑黑 发表于 2023-6-13 12:18
简单解释（待编辑）
单元格一：@nth(1) {...}
缓缓地落花与配乐相得益彰。 古色古香的，漂亮，欣赏问好！{:4_180:} 梦缘 发表于 2023-6-13 17:44
古色古香的，漂亮，欣赏问好！
{:4_190:} 红影 发表于 2023-6-13 15:25
这么多落花，右下角还有一对兔子。还是头一次看到黑黑做这样风格的帖子呢，古色古香的，漂亮
不是吧？之前有过的 梦油 发表于 2023-6-13 15:35
缓缓地落花与配乐相得益彰。
感谢支持 红影 发表于 2023-6-13 15:29
因为嵌套的单元格里的内容不受外部影响，为了证明，黑黑特地设置了不止一个的 rot 动画名吧
同名动画不是为了证明什么，那是处于无奈 红影 发表于 2023-6-13 15:35
背景高度才689px; 黑黑设置到达800px 才变成opacity: 0 ，是怕太快看不到那些花朵吧，也可以设置到达底端变 ...
因为有 rotate 一定的角度，800px 不会落到底，不是你所理解的那样 红影 发表于 2023-6-13 15:31
z-index: calc(@size + 1); 这个为什么这样取，直接取数字也可以的吧，比如10或20 ？
这是巧妙的设计。有时候我们可能会添加多一些的单元格，如果你用数字给 z-index 属性赋值，那你得去修改数字，而 clac(@size + 1) ，不论添加了多少个，都能保证 @nth(1) 单元格处在兄弟单元格的最顶层。 古风好看，可以常做{:4_173:} 南无月 发表于 2023-6-13 18:49
古风好看，可以常做
布料不足，古风不保 马黑黑 发表于 2023-6-13 17:58
不是吧？之前有过的
这样古色古香地吹笛子，之前吹过么{:4_173:} 马黑黑 发表于 2023-6-13 17:59
同名动画不是为了证明什么，那是处于无奈
这有什么无奈的，换个名儿不就完了？ 马黑黑 发表于 2023-6-13 18:00
因为有 rotate 一定的角度，800px 不会落到底，不是你所理解的那样
哦哦，原来还有这样的考虑{:4_187:}