css-doodle实现彩色粒子瀑布流动画效果代码
代码语言:html
所属分类:粒子
代码描述:使用css-doodle就实现彩色粒子堆积形成瀑布流动画效果代码
代码标签: css-doodle 粒子 瀑布流 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0; background: #000; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; } </style> </head> <body > <css-doodle> :doodle { @grid: 12 / 50vmin 80vmin; perspective: 90vmin; perspective-origin: 0% -140%; transform: scale(.6); } :container { transform-style: preserve-3d; animation: camera 5s ease-in-out infinite; animation-direction: alternate-reverse; } --ds: @r(1.5s, 6s, .1); --size: @r(1, 9); /* Thanks to mootari for the tip */ --z: calc(@i() * .0001px + var(--size) * .1px); animation: move var(--ds) linear infinite, opacity var(--ds) linear infinite; animation-delay: calc((@row() - @size-row()) * var(--ds) / @size-row() - @r(@size()) * .1s); :after { content: ''; @size: calc(var(--size) * 10%); background: @p(#00b8a9, #f8.........完整代码请登录后点击上方下载按钮下载查看
网友评论0