何以歌

马黑黑 · 发表于 2023-6-13 12:17

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

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

x

: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); } }

马黑黑 · 发表于 2023-6-13 12:17

帖子代码

<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:18

本帖最后由马黑黑于 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 即可。