《崛起》代码及注释

马黑黑 · 发表于 2023-5-9 12:54

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

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

x

本帖最后由马黑黑于 2023-5-9 12:59 编辑

帖子代码与说明

<css-doodle id="mplayer">
/* 父元素相关属性 */
:doodle {
@grid: 10 / 1024px 640px;
background: gray linear-gradient(-4deg,olive,transparent,black);
box-shadow: 0 0 8px #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
z-index: 1;
--state: paused; /* CSS变量：用于控制音乐暂停与播放时月亮的运转状态 */
}
position: absolute; /* 所有单元格绝对定位 */
/* 第一个单元格属性设置：半月 */
@nth(1) {
--deg: 10deg; /* CSS变量： */
@size: 80px; /* 尺寸 */
@place: 50% 10%; /* 位置 */
border-radius: 50%; /* 设置形状为圆形 */
box-shadow: 18px 18px snow; /* 阴影设置：用以模拟半月 */
transform: rotate(-10deg); /* 预先旋转角度 */
animation: rot .8s infinite alternate linear var(--state); /* 调用关键帧动画 */
/* 以下是月亮的伪元素：用于令音乐具有感知能力等 */
:before {
content: '';
@size: 100%;
position: absolute;
left: 18px;
top: 18px;
cursor: pointer;
}
}
/* 星星：凡单元格序号大于 1 且小于等于 80 的单元格都做星星 */
@match(i > 1 && i ≤ 80) {
@size: @r(1,4)px; /* 随机大小 1-4px 之间 */
@place: @r(0, 100)% @r(0, 30)%; /* 位置：在 0% - 100% 水平方向之间、0% - 30% 纵向方向之间 */
background: lightblue;
--deg: -45deg; /* CSS变量赋值：旋转角度 */
/* 调用关键帧动画 */
animation: fade @r(.8, 1.2)s @r(-.2, 1)s infinite alternate, rot @r(.5, 1.5)s infinite alternate;
}
/* 竹笋：凡单元格序号大于 80 的都做竹笋 */
@match(i > 80) {
@size: @r(10px, 200px) @lr; /* 尺寸：宽高一致，宽在 10 - 200px 之间，@lr 函数表示取前一个随机值 */
background: linear-gradient(green,silver);
left: @r(0, 100)%; /* 水平定位：0% - 100% 之间 */
bottom: 0; /* 纵向定位：位于底部 0 像素处 */
/* 下句是 transform 几种变换运动的应用，注意 skew 也用上了 @lr 函数 */
transform: translateY(@p(50%, 100%)) rotate(45deg) skew(@r(30, 40deg), @lr);
}
/* 下面是两个关键帧动画 */
@keyframes fade { to { opacity: .2; } }
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=544951747" autoplay loop></audio>
<script>
(function() {
/* 下面三行：加载 css-doodle 组件 */
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.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>