海
本帖最后由 马黑黑 于 2023-5-20 12:13 编辑 <br /><br /><css-doodle grid="5" id="mplayer">:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/webp1/sea1.webp') no-repeat center/cover, linear-gradient(blue,green);
background-blend-mode: lighten;
box-shadow: 0 0 8px #000;
position: relative;
margin: -80px 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@match(@i ≤ @size - 1) {
@size: @r(50,100)px;
@shape: @p(fish, whale);
@place:50px 50px;
background: rgba(@m3(@r(255)), .9);
offset-path: path('M@r(200) @r(200), L@r(800,1000) @r(300), L@r(400,550) @r(500,640)Z');
:after {
position:absolute;
content: '';
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(black,snow);
}
animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
}
@nth(@size) {
@shape: bud 5;
@size: 100px;
@place: center 90%;
background: rgba(200,20,20,.65);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes swim { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1859139069" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/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>
南无月 发表于 2023-5-24 22:44
提价了啊，唉，一天咋就才24小时……
这叫时间通胀 本帖最后由 马黑黑 于 2023-5-20 12:13 编辑
帖子代码
<css-doodle grid="5" id="mplayer">
:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/webp1/sea1.webp') no-repeat center/cover, linear-gradient(blue,green);
background-blend-mode: lighten;
box-shadow: 0 0 8px #000;
position: relative;
margin: -80px 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@match(@i ≤ @size - 1) {
@size: @r(50,100)px;
@shape: @p(fish, whale);
@place:50px 50px;
background: rgba(@m3(@r(255)), .9);
offset-path: path('M@r(200) @r(200), L@r(800,1000) @r(300), L@r(400,550) @r(500,640)Z');
:after {
position:absolute;
content: '';
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(black,snow);
}
animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
}
@nth(@size) {
@shape: bud 5;
@size: 100px;
@place: center 90%;
background: rgba(200,20,20,.65);
cursor: pointer;
animation: rot 5s infinite linear var(--state);
}
@keyframes swim { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1859139069" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/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>
本帖最后由 马黑黑 于 2023-5-20 13:35 编辑
关于偏移路径 offset-path 和 偏移距离 offset-distance
offset-path 又称相抵路径，个人认为使用偏移路径称呼它相对直观。这是一个发展中属性，目前对之支持较好的浏览内核是 Chromium，如Chrome、新版Edge、百分浏览器等。
offset-path给元素制定制定一个运动路径，元素在沿着该路径运动时，在拐弯的地方会自动调整自身的“躯体”。元素沿路径运动的指令由 offset-distance 发出，即使不设计关键帧动画，也可以使用 offset-distance 来布置元素在 offset-path 路径上的位置且元素会根据当前路径上的位置调制自身的朝向。
offset-path 和offset-distance 的语句，假设元素CSS选择器为 .ball ：
.ball {
/* 其他代码 */
offset-path: path('路径描述');
offset-distance: 20%;
}
路径描述有自己的语法规范，参照的是 svg 的路径描述方式。首先，需要定位元素在父层元素上的初始位置，用的是 m 或 M 命令，小写 m 表示相对路径值，大写用的是绝对路径值，该命令跟一个 {x,y} 坐标值，描述的是元素在父层元素上的最初位置的xy坐标：
offset-path: path('M 10, 20 ......');
这表示，元素最开始时，移动到父对象的 {10,20} 处，单位为 px（下同）。
其次，使用其他命令继续描述元素的运行路径，例如，本帖所使用的 L 命令，L 和 l 表示在当前点开始画一条直线，画到 {xy} 坐标处：
offset-path: path('M 10, 20L 100, 50, ......');
这里，L 100, 50 表示从上一个起点亦即 M 命令所描述的 {10,20} 开始，画一条到 {100 + 10,50 + 20} 的直线。L 是大写命令，表示使用的是绝对值，100 就是表示 从 上一个 x1 到下一个 x2 的距离为 100，若是小写 l 命令，则是相对距离，元素从 x1 到 x2 的真正距离为 x2 - x1 即上例中的 100 - 10 = 90（px）。
再接着，可以继续用 L 命令或其他命令绘制余下路径，到最后可以绘制闭合的路径，即终点的 xy坐标 和起点的 xy坐标 重合，或在即将结束的点用上字母 z 或 Z，z表示是闭合路径，最后一节没有画出的，系统自动补上。
更多的 offset-path 绘制知识可以自行在网上搜一搜。
而 offset-distance，可以用在关键帧动画 @keyframes 选择器中，用以描述元素沿路径的运动规则：
@keyframes move {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
最后，由对应元素的 animation 属性调用关键帧动画，任务完成。
PS：
本帖的 offset-path 设置，实际上是为每一个符合单元格序号小于等于 @size - 1 即总单元个数减1 的单元格设计的，有多少个单元格就设计了多少条 offset-path 路径，这完全得益于 css-doodle 的便捷性，不然，在纯CSS里，设计这么多条 offset-path 是很麻烦的，借助JS来完成设计虽然可行，也比使用 css-doodle 设计的复杂。
这么多鱼都是代码的啊 老师👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 这水下世界也很热闹。 感谢老师的代码分享，好逼真啊！{:4_190:} 醉美水芙蓉 发表于 2023-5-20 17:09
海底世界真漂亮！
还行 绿叶清舟 发表于 2023-5-20 13:54
这么多鱼都是代码的啊
css-doodle一个 @shape 属性的事情 梦缘 发表于 2023-5-20 16:43
感谢老师的代码分享，好逼真啊！
{:4_190:} 亚伦影音工作室 发表于 2023-5-20 15:41
老师👍🏻👍🏻👍🏻👍🏻👍🏻Ԁ ...
看不明白 梦油 发表于 2023-5-20 16:02
这水下世界也很热闹。
是的。下午好 马黑黑 发表于 2023-5-20 17:43
是的。下午好
这鱼儿的游动路线也是自行设计的吧？ 随意的鱼和鲸鱼，其实这两种区别不是很大。最厉害的是可以为每条鲸鱼加上眼睛呢，这个看着真热闹{:4_199:} 马黑黑 发表于 2023-5-20 12:12
关于偏移路径 offset-path 和 偏移距离 offset-distance
offset-path 又称相抵路径，个人认为使用偏移路 ...
“路径描述有自己的语法规范，参照的是 svg 的路径描述方式。”
原来搜 offset-path 搜不到，又觉得是学过的，原来是svg时候学的{:4_173:} 这里是24条鱼吧，背景选得好，真的像在水底世界似的{:4_187:} 好漂亮 小文 发表于 2023-5-20 19:20
好漂亮
感谢支持。晚上好 马黑黑 发表于 2023-5-20 20:19
感谢支持。晚上好
晚上好，才子！{:4_187:}{:4_191:}