穿越时空遇见你（学习黑师《物换星移几度秋》粒子效果）

位置: 首页 > 悄然作业[ 发布时间: 2023.7.9 作者: 花飞飞阅读: 230 ]

:doodle { @size: 60px; cursor: pointer; left: 30px; bottom: 30px; opacity: .96;z-index: 4; }clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t););background: linear-gradient(DeepSkyBlue,LightSkyBlue,MediumPurple);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }

:doodle {@size: 200px 300px;right:10px;background: lightblue url('https://s1.ax1x.com/2023/07/06/pC6tCB4.jpg') no-repeat center / cover;;position: relative;opacity: .95;z-index: 99;margin: 140px auto;}:doodle { @grid: 126x1 / 650px; @shape: drop; background: @m2(radial-gradient(#fff 50%, transparent calc(50% + 1px)) @pn(200px 478px, 192px 469px) / @pn(80px 32px, 64px 32px)no-repeat), linear-gradient(10deg, #fff 26.5%, transparent calc(26.5% + 1px)), linear-gradient(205deg, #5256bd 56%, #954ccc);}offset-path: path('M @r650 600 Q @calc(@lr + @p(@r(-300, -20), @r(20, 300), @r(±300))) @r650 @lr5 0 '); position: absolute; will-change: offset-distance; animation: move @r(12s, 30s) infinite linear var(--state); animation-delay: -@r(25s) ;@keyframes move { 0% { offset-distance: 100% } 20%, 80% { opacity: 1 } 100% { offset-distance: 0 opacity: 0 }} :after,:before { color: transparent; text-shadow: 0 0 0 #fff;} :after { content: @p([❉❄❅❆...❄️]); font-size: @r(10px, 35px);}@nth(4-n) { animation: none; offset-path: none; left: @pn(352px, 372px, 416px, 156px); top: @pn(416px, 437px, 460px, 434px); transform: @pn(scaleY(4), scaleX(.75) scaleY(1.55), none, scaleY(1.5));} @nth(1) { filter: blur(108px); } @nth(4) { :after { content: '☃'; font-size: 78px; }}

前一篇: 葬花吟(学习黑师图文小贴子作业之二)
下一篇: 烟雨江南（学习黑师《可是归人》水滴粒子效果）

发表评论:

评论列表 [3条]

#3 | 悄然于 2023-7-10 12:23 发布: 刚才试了一下这个滤镜，果然好用。。有点深色的灰。100%不能动，0.6调到0.4就比较淡一些。。但，这彩色的还是很喜欢。。就不改了。。

#2 | 马黑于 2023-7-9 20:53 发布: 目前，对颜文字的颜色处理，可以考虑用 filter 滤镜：filter: grayscale(100%) opacity(.6);，这样会编程偏白的灰色

#1 | 了了于 2023-7-9 08:10 发布: 事实证明，雪花也可以是彩色的。。