《崛起》代码及注释
本帖最后由 马黑黑 于 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>
帖子地址：崛起 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
辛苦了，为了那张图图，竟然要设计这么些代码，要烧掉不少脑神经吧。 100个单元格，只有下面的2行才是竹笋，有点少呢{:4_173:} @size: @r(10px, 200px) @lr;，去量了一下，高度有大于200的啊。 樵歌 发表于 2023-5-9 15:03
辛苦了，为了那张图图，竟然要设计这么些代码，要烧掉不少脑神经吧。
这和你写一首诗差不多 红影 发表于 2023-5-9 17:23
100个单元格，只有下面的2行才是竹笋，有点少呢
少而精 红影 发表于 2023-5-9 17:26
@size: @r(10px, 200px) @lr;，去量了一下，高度有大于200的啊。
因为它们做了变形，尤其是 skew 能让其产生拉伸 马黑黑 发表于 2023-5-9 17:33
这和你写一首诗差不多
真是隔行如隔山，那代码好复杂的，吓人{:4_173:} 黑黑又有新的分享了，现在去看看效果 小辣椒 发表于 2023-5-9 19:40
黑黑又有新的分享了，现在去看看效果
晚上嚎 樵歌 发表于 2023-5-9 19:35
真是隔行如隔山，那代码好复杂的，吓人
你写的诗作也是很吓人的 马黑黑 发表于 2023-5-9 17:34
少而精
也是，看起来不算少了呢{:4_187:} 马黑黑 发表于 2023-5-9 17:34
因为它们做了变形，尤其是 skew 能让其产生拉伸
transform 中有好几种变换运动，能造成那么奇妙的效果。 红影 发表于 2023-5-9 20:27
transform 中有好几种变换运动，能造成那么奇妙的效果。
对，需要慢慢去体会 红影 发表于 2023-5-9 20:25
也是，看起来不算少了呢
当然可以适当调多一点 马黑黑 发表于 2023-5-9 20:30
对，需要慢慢去体会
原来就可以这样并列着放就可以了。css-doodle的命令还是不熟，看着感觉不知道怎样弄才不出错。 马黑黑 发表于 2023-5-9 20:31
当然可以适当调多一点
这样就足够多了。 红影 发表于 2023-5-9 21:46
这样就足够多了。
对吧，合适就好 红影 发表于 2023-5-9 21:46
原来就可以这样并列着放就可以了。css-doodle的命令还是不熟，看着感觉不知道怎样弄才不出错。
CSS + css-doodle，其实总原理还是CSS 马黑黑 发表于 2023-5-9 21:57
对吧，合适就好
饿呢，太多了反倒不好。