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

南无月

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

南无月

@马黑黑 老师来批改一下四（一）的使用效果

南无月

网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似是存在于两个时空里……
红衣美人儿似乎在看时空另一端的自己。。。
镜内雪无色接近真实……
镜外雪彩色如梦似幻（就是这两天玩的粒子效果了）
互相看看，你们以前可认识么？

马黑黑

这个还用了两个 css-doodle，其中一个126个单元格，所以资源消耗较大。整体效果不错，不过将来做帖应权衡帖子使用元素 的数量问题，粒子 和 css-doodle 单元格都是元素。

马黑黑

南无月 发表于 2023-7-9 09:16
网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似 ...

思路很不错

马黑黑

南无月 发表于 2023-7-9 09:09
@马黑黑 老师来批改一下四（一）的使用效果

10000√

南无月

马黑黑 发表于 2023-7-9 09:18
这个还用了两个 css-doodle，其中一个126个单元格，所以资源消耗较大。整体效果不错，不过将来做帖应权衡帖 ...

这个126也是雪花。。
明白了，以后要根据实际情况适当增删。。

南无月

马黑黑 发表于 2023-7-9 09:19
思路很不错

太好了，这个有点故事感

马黑黑

南无月 发表于 2023-7-9 10:59
太好了，这个有点故事感

大型叙事帖

南无月

马黑黑 发表于 2023-7-9 09:20
10000√

一百又一百，这个壮观

马黑黑

南无月 发表于 2023-7-9 10:59
一百又一百，这个壮观

南无月

马黑黑 发表于 2023-7-9 10:59
大型叙事帖

每片雪花都是一句话的话有286句

南无月

马黑黑 发表于 2023-7-9 11:00

马黑黑

南无月 发表于 2023-7-9 11:20
每片雪花都是一句话的话有286句

话唠了

南无月

马黑黑 发表于 2023-7-9 11:36
话唠了

吵得很

马黑黑

南无月 发表于 2023-7-9 11:39
吵得很

俺喜欢安静

南无月

马黑黑 发表于 2023-7-9 11:40
俺喜欢安静

安静的抽着烟写代码

马黑黑

南无月 发表于 2023-7-9 11:46
安静的抽着烟写代码

还有读书

红影

月儿这个帖子的含金量高，不但有粒子效果，更有奇特的css-doodle效果，结合在一起，特别精彩

红影

南无月 发表于 2023-7-9 09:16
网上看到一个裁切水滴形状，觉得好看，拿来用一用。。。
如果这个水滴是个镜子，那镜外红衣女镜内红衣女似 ...

这个裁切水滴形状还是第一次看到呢，特别奇特