『六·一』贺帖 - 我们的世界

马黑黑 · 发表于 2023-5-31 07:48

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

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

x

:doodle { @size: 1024px 600px; background: #eee url('https://638183.freep.cn/638183/t23/webp1/61c.webp') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; margin: 0 0 0 calc(50% - 593px); opacity: .95; z-index: 1; --state: paused; } @nth(1) { @size: 100%; position: absolute; background-image: @svg( viewBox: 0 0 10 10; stroke: rgba(0,100,0,.45); stroke-width: .05; stroke-linecap: round; line*20x20 { x1, y1, x2, y2: @p( @nx(-1) @ny(-1) @nx @ny, @nx @ny(-1) @nx(-1) @ny, @nx @ny(-1) @nx @ny ); } ); } @match(i ≥ 2 && i ≤ @size - 1) { @size: 200px; @place: @r(100, 920)px @r(100, 540)px; background: @doodle( @grid: 6x1 / 200px; @place: @plot(r: .3; dir: auto - 120); @size: 50%; border-radius: 50%; box-shadow: @r(20,40)px 0 0 -10px rgb(@m3(@r(255))); ); cursor: pointer; animation: rot @r(4,8)s infinite linear var(--state); } @nth(@size) { @size: 120px; @place: 70% 578px; font-size: 40px; :after { content: '👨‍👩‍👧‍👦';} } @keyframes rot { to { transform: rotate(360deg); } }

马黑黑 · 发表于 2023-5-31 07:49

帖子代码

<css-doodle grid="3" id="mplayer">
:doodle {
@size: 1024px 600px;
background: #eee url('https://638183.freep.cn/638183/t23/webp1/61c.webp') no-repeat center/cover;
box-shadow: 0 0 6px #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
opacity: .95;
z-index: 1;
--state: paused;
}
@nth(1) {
@size: 100%;
position: absolute;
background-image: @svg(
viewBox: 0 0 10 10;
stroke: rgba(0,100,0,.45);
stroke-width: .05;
stroke-linecap: round;
line*20x20 {
x1, y1, x2, y2: @p(
@nx(-1) @ny(-1) @nx @ny,
@nx @ny(-1) @nx(-1) @ny,
@nx @ny(-1) @nx @ny
);
}
);
}
@match(i ≥ 2 && i ≤ @size - 1) {
@size: 200px;
@place: @r(100, 920)px @r(100, 540)px;
background: @doodle(
@grid: 6x1 / 200px;
@place: @plot(r: .3; dir: auto - 120);
@size: 50%;
border-radius: 50%;
box-shadow: @r(20,40)px 0 0 -10px rgb(@m3(@r(255)));
);
cursor: pointer;
animation: rot @r(4,8)s infinite linear var(--state);
}
@nth(@size) {
@size: 120px;
@place: 70% 578px;
font-size: 40px;
:after { content: '👨‍👩‍👧‍👦';}
}
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1359463526" 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>

复制代码

马黑黑 · 发表于 2023-5-31 08:03

主 css-doodle 图案为 3 x 3 = 9 个单元格：

第一个单元格做背景图片的“护网”之用，所以它绝对定位、百分百大小，以与主元素完全贴合。该单元格使用 @svg() 函数实时以 css-doodle 提供的CSS格式写一个 svg 图案，即“护网”；

第二至第八个单元格，即 @match(i ≥ 2 && i ≤ @size - 1) {...} ，每一个单元格的 background-image 属性均嵌套一个 css-doodle 做背景，就是大家所看到的随机定位的播放器——它们每一个都是 6 x 1 = 6 个单元格的图案；

最后一个单元格，即 @nth(@size) {...}，放上俺们家N年前的全家福照片，用的是该单元格的伪元素 content 放置文本的方式。

帖子代码不能算多，整体设计也不复杂，但由于嵌套使用 @svg 和 @doodle 函数，小白一时间可能消化不了，但不应影响咱们过节日的心情。顺祝节日快乐！