祝所有蟹子们生日快乐 （凡哥代码）

司敏儿

:doodle {@size: 150vw 150vmin;perspective: 10px; } :container {perspective: 50px; transform-style: preserve-3d; } position: absolute; top: 0px; left: 0; width: 12px; height: 12px; border-radius: 50%; left: 50%; top: 50%; background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%)); transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px); animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate; box-shadow: 0 0 1px #fff, 0 0 5px #fff; @keyframes move {100% { margin-top: 500px;} } :doodle { @size: 200px; cursor: pointer; right: 500px; top: 1300px; opacity: .96;z-index: 4; } clip-path: @shape(frame:4;points:40;x: cos(24t)^5 * cos(15t);y: cos(24t)^5 * sin(15t);); background: linear-gradient(HotPink,LavenderBlush,Snow); animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); } } :doodle { @size: 1200px 1700px; margin: 20px auto; } @size: 65px; position: absolute;background: linear-gradient(Snow,HotPink,LavenderBlush); clip-path: @shape(frame: 4;points: 40; x: cos(24t)^5 * cos(15t);y: cos(24t)^5 * sin(15t);); border-radius: 50%;cursor: pointer; offset-path: path('M900 900 A100 100 0 1 0 300 450'); offset-distance: calc((@i - 1) * 20%); animation: rot 6s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); } } :doodle { @size: auto 4em; z-index:5; bottom: 60px; left: 50%; transform: translate(-50%); --geci: " css-doodle player"; --motion: cover2; --tt: 1s; } display: grid; place-items: center start; :before, :after {content: var(--geci);color: Pink;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;} :after {position: absolute;width: 0;color:LavenderBlush;overflow: hidden;animation: var(--motion) var(--tt) linear forwards var(--state);} @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } }

巨蟹座生日快乐！

司敏儿

【黑师代码】传奇  （司敏儿生日快乐！）
http://qslt.net/forum.php?mod=viewthread&tid=13611
(出处: 千山论坛)

司敏儿

1. <css-doodle grid="5x5" >
   
2.     :doodle {
   
3.         @size: 150vw 150vmin;
   
4.         perspective: 10px;
   
5.     }
   
6.     :container {
   
7.         perspective: 50px;
   
8.         transform-style: preserve-3d;
   
9.     }
   
10.     position: absolute;
    
11.     top: 0px;
    
12.     left: 0;
    
13.     width: 12px;
    
14.     height: 12px;
    
15.     border-radius: 50%;
    
16.     left: 50%;
    
17.     top: 50%;
    
18.     background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
    
19.     transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
    
20.     animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
    
21.     box-shadow: 0 0 1px #fff, 0 0 5px #fff;
    
22.     @keyframes move {
    
23.         100% {
    
24.             margin-top: 500px;
    
25.         }
    
26.     }
    
27. </css-doodle>
    

复制代码

添加粒子动画代码

司敏儿

1. <css-doodle>
   
2.   :doodle {
   
3.     @grid: 45x1 / 40vmin;
   
4.     position: relative;
   
5.     z-index: 1;
   
6.   }
   
7.   :container {
   
8.     transform: translate(50%, 33vmin)
   
9.   }
   
10.   :after, :before {
    
11.     content: '';
    
12.     @place-cell: center;
    
13.     @size: 100%;
    
14.     background: radial-gradient(
    
15.       @p(#FFFDE1, #FB3569) @r(70%),
    
16.       transparent 0
    
17.     )
    
18.     @pn(30% 50%, 70% 50%, 50% 60%) /
    
19.     @r(.1vmin, 5vmin) @lr()
    
20.     no-repeat;
    
21.   }
    
22.   
    
23.   @place-cell: centerr;
    
24.   @size: 100%;
    
25.   
    
26.         will-change: transform;
    
27.   animation: r 4s linear infinite;
    
28.   animation-delay: calc(-4s / @size() * @i());
    
29. 
    
30.   --translate: translateY(calc(-66vmin / @size() * @i()));
    
31.   @keyframes r {
    
32.     from { transform: var(--translate) rotate(0) }
    
33.     to { transform: var(--translate) rotateZ(-1turn) }
    
34.   }
    
35. </css-doodle>
    

复制代码

螺旋动画

司敏儿

1. <css-doodle>
   
2.         :doodle {
   
3.                 @grid: 1x3 / 100vmax;
   
4.     position: absolute;
   
5.     top: 0; left: 0;
   
6.     z-index: 0;
   
7.         }
   
8. 
   
9.         @size: 100% 150%;
   
10.         position: absolute;
    
11.   
    
12.         background: @m(100, (
    
13.                 linear-gradient(transparent, @p(
    
14.       #FFFDE1@repeat(2, @p([0-9a-f])),
    
15.       #FB3569@repeat(2, @p([0-9a-f]))
    
16.     ))
    
17.                 @r(0%, 100%) @r(0%, 100%) /
    
18.                 @r(1px) @r(23vmin)
    
19.                 no-repeat
    
20.         ));
    
21. 
    
22.         will-change: transform;
    
23.         animation: f 20s linear calc(-20s / @size() * @i()) infinite;
    
24.         @keyframes f {
    
25.                 from { transform: translateY(-100%) }
    
26.                 to { transform: translateY(100%) }
    
27.         }
    
28. </css-doodle>
    
29. 
    
30. 
    

复制代码

流星下坠动画

安静听雨

欣赏敏儿美图。
歌曲很合适用于祝福的图。

糊涂仙儿

哈哈，巨蟹，这个喜欢。想念我的大螃蟹了

茶茉

哈哈，我这张牙舞爪的蟹蟹来了

花简静

敏儿这个效果太棒了，看到你改了图图
https://css-doodle.com/shapes/#collection这里有个网站，有许多图案。并且每个都可以更改
如果有兴趣可以去瞧一眼

花简静

星星在飞扬，传递着欢乐。。。蟹蟹们生日快乐