|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-4-14 08:43 编辑
制作一个和 苍穹 帖子类似的2d粒子特效
知识准备:
① 我们需要用到一个很快会在入门教程中介绍的 css-doodle 函数,@rand() ,该函数返回两个数之间的一个浮点数值,例如,@rand(0,3) 会返回 0 - 3 之间的一个浮点数。@rand() 函数内的参数可以只要一个数字,例如,@rand(2),它将返回在 0 - 2 之间的浮点数。@rand() 函数可以缩写成 @r() 。
② 相关 CSS 知识,例如 calc 计算函数、rgba()颜色表达体系、@keyframes 关键帧动画选择器、animation 关键帧动画调用属性等。
霸王硬上弓:直接上代码——
- <css-doodle grid="20">
- :doodle {
- @size: 400px;
- background: #000;
- }
- background: rgba(@r(255), @r(255), @r(255), @calc(@r(.5) + .5));
- border-radius: 50%;
- @size: @r(2,8)px;
- @place-cell: 50% 102%;
- animation: ani 12s @r(-20,20)s infinite alternate;
- @keyframes ani { to { transform: rotate(@r(-40,40)deg) translateY(-300px); } }
- </css-doodle>
复制代码
代码解释:
行1和行12:css-doodle 标签。其中,行1的 grid="20" 表示建立一个 20x20 的网格;
行2至行5:css-doodle 主元素设定,其中,行3设置父元素尺寸为 400x400(px),行4设置主元素背景色;
行6至行11:这些设置都是基于网格里的所有单元格,即主元素下的子元素,其中:
行6:随机设定每一个单元格的背景色,使用 rgba(R,G,B,Alpha) 颜色体系,R、G、G、Alpha 四个参数值均使用 css-doodle 的 @r() 函数获取,Alpha 系数还使用 CSS 的 calc() 计算函数确保其中不低于 0.5 也不会高于该系数的峰值 1 ;
行7:纯CSS属性,所有单元格都设置成圆形;
行8:使用 @r() 函数随机设置各单元格大小,最小 2x2(px)、最大 8x8(px);
行9:用 @place-cell 定位单元格,横向 50%,纵向 102%,这么设置横与纵的方向定位,是为了初始时令元素相对在横向中心处、纵向底部且隐藏单元格;
行10:用 animation 属性调用 ani 关键帧动画,12s 的运行周期,延时从 -20 至 20 秒之间,循环且往复运行。负值的延时,使得粒子的状态在初始运行时就能体现出来:负值延时会立即执行,且立即进入负值转正值的周期状态,例如,设置 -2s 的运行延时,则该粒子一开始就进入到运行周期环节中的第2秒的状态。
行11:设计一个名为 ani 的关键帧动画,先随机在 -40deg 至 40deg 之间进行旋转,然后沿Y轴上升 300 px,rotate 结合 translate 转换会令运动对象做弧线运动。
效果演示:请将代码复制到 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 页面运行查看。
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|