[灌水] 海

马黑黑 · 发表于 2023-5-20 12:10

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

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

x

本帖最后由马黑黑于 2023-5-20 12:13 编辑

: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); } }

马黑黑 · 发表于 2023-5-24 22:47

南无月发表于 2023-5-24 22:44
提价了啊，唉，一天咋就才24小时……

这叫时间通胀

马黑黑 · 发表于 2023-5-20 12:12

本帖最后由马黑黑于 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 12:12

本帖最后由马黑黑于 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, 20 L 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 设计的复杂。

绿叶清舟 · 发表于 2023-5-20 13:54

这么多鱼都是代码的啊

亚伦影音工作室 · 发表于 2023-5-20 15:41

老师👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

梦油 · 发表于 2023-5-20 16:02

这水下世界也很热闹。

梦缘 · 发表于 2023-5-20 16:43

感谢老师的代码分享，好逼真啊！

显示全部楼层 · 发表于 2023-5-20 17:09

提示: 作者被禁止或删除内容自动屏蔽

马黑黑 · 发表于 2023-5-20 17:42

醉美水芙蓉发表于 2023-5-20 17:09
海底世界真漂亮！

还行

马黑黑 · 发表于 2023-5-20 17:42

绿叶清舟发表于 2023-5-20 13:54
这么多鱼都是代码的啊

css-doodle一个 @shape 属性的事情

马黑黑 · 发表于 2023-5-20 17:42

梦缘发表于 2023-5-20 16:43
感谢老师的代码分享，好逼真啊！

马黑黑 · 发表于 2023-5-20 17:43

亚伦影音工作室发表于 2023-5-20 15:41
老师👍🏻👍🏻👍🏻👍🏻👍🏻&#1280 ...

看不明白

马黑黑 · 发表于 2023-5-20 17:43

梦油发表于 2023-5-20 16:02
这水下世界也很热闹。

是的。下午好

梦油 · 发表于 2023-5-20 18:17

马黑黑发表于 2023-5-20 17:43
是的。下午好

这鱼儿的游动路线也是自行设计的吧？

红影 · 发表于 2023-5-20 19:07

随意的鱼和鲸鱼，其实这两种区别不是很大。最厉害的是可以为每条鲸鱼加上眼睛呢，这个看着真热闹

红影 · 发表于 2023-5-20 19:09

马黑黑发表于 2023-5-20 12:12
关于偏移路径 offset-path 和偏移距离 offset-distance

offset-path 又称相抵路径，个人认为使用偏移路 ...

“路径描述有自己的语法规范，参照的是 svg 的路径描述方式。”

原来搜 offset-path 搜不到，又觉得是学过的，原来是svg时候学的

红影 · 发表于 2023-5-20 19:11

这里是24条鱼吧，背景选得好，真的像在水底世界似的

小文 · 发表于 2023-5-20 19:20

好漂亮

马黑黑 · 发表于 2023-5-20 20:19

小文发表于 2023-5-20 19:20
好漂亮

感谢支持。晚上好

小文 · 发表于 2023-5-20 20:21

马黑黑发表于 2023-5-20 20:19
感谢支持。晚上好

晚上好，才子！

醉美水芙蓉该用户已被删除	发表于 2023-5-20 17:09 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

[灌水] 海

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

评分

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

蝴蝶情怀

心曲飞扬

七彩绚丽

指尖上的流年

花潮版主

缤纷心情

金剪刀

妙笔生花

前途似锦

心香一瓣

草莓情怀

星星情怀

活泼开朗

女儿情怀

一往情深

天长地久

绚丽缤纷

中秋征文

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

流光溢彩