css-doodle实现下雪景色动画效果代码
代码语言:html
所属分类:动画
代码描述:css-doodle实现下雪景色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; margin: 0 }body { display: grid; place-content: center; background: radial-gradient(#e4d8fb, #3F51B5) }@media screen and (max-width: 640px) { css-doodle { -webkit-transform: scale(.5); transform: scale(.5); }} @media screen and (max-height: 640px) { css-doodle { -webkit-transform: scale(.5); transform: scale(.5); } } </style> </head> <body> <!-- partial:index.partial.html --> <css-doodle>: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), @.........完整代码请登录后点击上方下载按钮下载查看
网友评论0