『六·一』贺帖 - 我们的世界
<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>
帖子代码
<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>
主 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 函数，小白一时间可能消化不了，但不应影响咱们过节日的心情。顺祝节日快乐！ 这个护网每次刷新也是变化的呢{:4_204:} 这个帖子里好多新东西，太棒了{:4_187:} 马黑黑 发表于 2023-5-31 08:03
主 css-doodle 图案为 3 x 3 = 9 个单元格：
第一个单元格做背景图片的“护网”之用，所以它绝对定位、 ...
黑黑不但详细解说，而且在最后祝大家节日快乐。谢谢黑黑，也祝黑黑节日快乐{:4_199:} 原来点那个全家福也能暂停的呢{:4_173:} 欣赏美帖，这是点击全画面都能暂停播放的播放器！，欣赏收藏学习了！{:4_190:} 哈哈哈，回帖有红包领，我就再回复一次试试！{:4_189:} 啊！真的有惊喜呢！{:4_189:} 旋转的图形，感谢代码分享！{:4_190:} 神秘的声音，点赞！{:4_204:} 三联惊喜，感谢老师分享！{:4_178:} 梦缘 发表于 2023-5-31 10:44
三联惊喜，感谢老师分享！
六联 红影 发表于 2023-5-31 08:49
黑黑不但详细解说，而且在最后祝大家节日快乐。谢谢黑黑，也祝黑黑节日快乐
{:4_171:} 红影 发表于 2023-5-31 08:45
这个护网每次刷新也是变化的呢
对，有随机性 梦缘 发表于 2023-5-31 10:43
神秘的声音，点赞！
{:4_180:} 红影 发表于 2023-5-31 08:46
这个帖子里好多新东西，太棒了
也不怎么新，嵌套的讲过 红影 发表于 2023-5-31 08:53
原来点那个全家福也能暂停的呢
整个页面都可以 亦是金 发表于 2023-5-31 09:33
啊！真的有惊喜呢！
惊喜连连