粒子满天飞（入门七作业）
位置:
首页 >
悄然作业[ 发布时间: 2023.4.30 作者: 花飞飞 阅读: 201 ]
:doodle {@size: 1024px 640px;background: url('https://pic2.imgdb.cn/item/644e58530d2dde577713aa5e.png') no-repeat center/cover;pointer-events: none;margin: 20px auto;box-shadow: 0 0 8px #000;--state: paused;} @grid: 40x1 / 150vmin 90vmin; :container { perspective: 23vmin; }cursor: pointer;pointer-events: auto; background: @m( @r(240, 200), radial-gradient( @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50% ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat ); @size: 30%; @place-cell: center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 15s linear infinite; animation-delay: calc(@i * -.4s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }
前一篇: 【马黑黑五一节快乐】晨曦（学习黑师天女散珠加春分小播效果）
下一篇: 山歌好比春江水（学习黑师css-doodle入门（七）教程效果）
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-5-1 11:06 发布: 3D感强烈的粒子，扑面而来的效果很不错
#1 | 飞飞 于 2023-4-30 20:23 发布: 看了入门七，想二改大自然，结果还是不成形状。网上乱搜，碰到一堆粒子代码，觉得好看，加了背景和音乐。这么先搁着吧。。。我发现自己找的那组现成的动图，应该也是代码写出来再把效果变成图片的。这下子可好玩了。。
