css绘制情绪小球动画效果代码
代码语言:html
所属分类:动画
代码描述:css绘制情绪小球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --spheres: 25; --bg-color: #111; /* look ma, no houdini */ --light-color: hsl( calc(-140 + var(--milliseconds, 0) / 200), 80%, 70% ); --light-x: var(--cursor-x-1, 0); --light-y: var(--cursor-y-1, 0); } body { height: 100dvh; display: grid; place-items: center; overflow: hidden; margin: 0; background: var(--bg-color); } .sphere { --color: hsl( calc(140 + var(--milliseconds, 0) / 200 + var(--i) * 5), calc(40% + var(--i) * 1%), calc(15% + var(--i) * .5%) ); --row: sqrt(var(--spheres)); --cell: calc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0