devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

学习CSS3，模拟春雪漫天飘的动画效果_css 雪夜动画

作者：2023面试高手 | 2024-03-07 21:52:35

赞

踩

css 雪夜动画

清明时节雨纷纷，但有些地方却下起了大雪，今天我们就用所学的CSS3知识，模拟一下夜晚漫天飘雪的场景吧。

目录

1. 实现思路

2. 部分HTML代码 

3. 夜空的背景 

4. 雪花的样式 

5. 粒子飞升效果 

6. HTML完整源代码 

7. CSS3完整源代码

8.  最后 

1. 实现思路

  • DIV布局的使用
  • 整体背景radial-gradient属性的使用
  • 夜空rotate属性的使用
  • 雪花radial-gradient属性的使用
  • 雪花移动动画animation属性的使用
  • 雪花移动过程中translate3d属性的使用

2. 部分HTML代码 

因为雪花的元素是相同的，只是移动的起点，移动过程，移动的终点不同，所以HTML元素大致相同，这里我们就不把所有的元素都粘贴过来了，稍后会粘贴出所有源代码，你可以拿到源代码放到自己的网页里，即可看到漫天飘雪的场景啦。

  1. <div class="container">
  2.   <div class="circle-container">
  3.     <div class="circle"></div>
  4.   </div>
  5.   <div class="circle-container">
  6.     <div class="circle"></div>
  7.   </div>
  8.   <div class="circle-container">
  9.     <div class="circle"></div>
  10.   </div>
  11.   ......
  12.   <!-- 此处重复此处越多，效果越好 -->
  13. </div>

3. 夜空的背景 

夜空为了绚烂一些，肯定不是能是纯黑色，需要做一定的过渡效果，雪花飘落才会更完美，这里用到了background-image: radial-gradient  等CSS属性

  1. body {
  2.   background-image: radial-gradient(#021027, #000000);
  3. }
  4.  
  5. .container {
  6.   width: 100%;
  7.   height: 100%;
  8.   overflow: hidden;
  9.   transform: rotate(180deg);
  10. }

4. 雪花的样式 

雪花虽然HTML元素相同，但表现形式却不同。他有自己的大小，明暗，移动轨迹，等等，越随机，才能越表现的真实而完美

  1. .circle-container .circle {
  2.   width: 100%;
  3.   height: 100%;
  4.   border-radius: 50%;
  5.   mix-blend-mode: screen;
  6.   background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  7.   -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
  8.           animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
  9. }
  10.  
  11. @-webkit-keyframes scale-frames {
  12.   0% {
  13.     -webkit-transform: scale3d(0.4, 0.4, 1);
  14.             transform: scale3d(0.4, 0.4, 1);
  15.   }
  16.   50% {
  17.     -webkit-transform: scale3d(2.2, 2.2, 1);
  18.             transform: scale3d(2.2, 2.2, 1);
  19.   }
  20.   100% {
  21.     -webkit-transform: scale3d(0.4, 0.4, 1);
  22.             transform: scale3d(0.4, 0.4, 1);
  23.   }
  24. }

5. 粒子飞升效果 

可能在第3步，大家看到了 transform: rotate(180deg); 的代码设置，这是做了另外的考虑。满天飞雪的场景，其实如果旋转屏幕，可以做为那种地面上有某种粒子，逐渐向上飞升的效果，也是非常棒的。喜欢的小伙伴可以试一下。

6. HTML完整源代码 

下面把完整源代码放出来，需要的小伙伴可以直接COPY过去，放到自己网页上就可以看到满天飞雪的效果啦

  1. <!DOCTYPE html>
  2. <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.  
  4. <title>漫天飘雪</title>
  5.  
  6. <link rel="stylesheet" href="./style.css">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <div class="container">
  12.   <div class="circle-container">
  13.     <div class="circle"></div>
  14.   </div>
  15.   <div class="circle-container">
  16.     <div class="circle"></div>
  17.   </div>
  18.   <div class="circle-container">
  19.     <div class="circle"></div>
  20.   </div>
  21.   <div class="circle-container">
  22.     <div class="circle"></div>
  23.   </div>
  24.   <div class="circle-container">
  25.     <div class="circle"></div>
  26.   </div>
  27.   <div class="circle-container">
  28.     <div class="circle"></div>
  29.   </div>
  30.   <div class="circle-container">
  31.     <div class="circle"></div>
  32.   </div>
  33.   <div class="circle-container">
  34.     <div class="circle"></div>
  35.   </div>
  36.   <div class="circle-container">
  37.     <div class="circle"></div>
  38.   </div>
  39.   <div class="circle-container">
  40.     <div class="circle"></div>
  41.   </div>
  42.   <div class="circle-container">
  43.     <div class="circle"></div>
  44.   </div>
  45.   <div class="circle-container">
  46.     <div class="circle"></div>
  47.   </div>
  48.   <div class="circle-container">
  49.     <div class="circle"></div>
  50.   </div>
  51.   <div class="circle-container">
  52.     <div class="circle"></div>
  53.   </div>
  54.   <div class="circle-container">
  55.     <div class="circle"></div>
  56.   </div>
  57.   <div class="circle-container">
  58.     <div class="circle"></div>
  59.   </div>
  60. </div>
  61.  
  62.  
  63. </body></html>

7. CSS3完整源代码

  1. html,
  2. body {
  3.   width: 100%;
  4.   height: 100%;
  5.   padding:0;margin:0;
  6. }
  7.  
  8. body {
  9.   background-image: radial-gradient(#021027, #000000);
  10. }
  11.  
  12. .container {
  13.   width: 100%;
  14.   height: 100%;
  15.   overflow: hidden;
  16.   transform: rotate(180deg);
  17. }
  18.  
  19. .circle-container {
  20.   position: absolute;
  21.   -webkit-transform: translateY(-10vh);
  22.           transform: translateY(-10vh);
  23.   -webkit-animation-iteration-count: infinite;
  24.           animation-iteration-count: infinite;
  25.   -webkit-animation-timing-function: linear;
  26.           animation-timing-function: linear;
  27. }
  28. .circle-container .circle {
  29.   width: 100%;
  30.   height: 100%;
  31.   border-radius: 50%;
  32.   mix-blend-mode: screen;
  33.   background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  34.   -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
  35.           animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
  36. }
  37.  
  38. @-webkit-keyframes scale-frames {
  39.   0% {
  40.     -webkit-transform: scale3d(0.4, 0.4, 1);
  41.             transform: scale3d(0.4, 0.4, 1);
  42.   }
  43.   50% {
  44.     -webkit-transform: scale3d(2.2, 2.2, 1);
  45.             transform: scale3d(2.2, 2.2, 1);
  46.   }
  47.   100% {
  48.     -webkit-transform: scale3d(0.4, 0.4, 1);
  49.             transform: scale3d(0.4, 0.4, 1);
  50.   }
  51. }
  52. @keyframes scale-frames {
  53.   0% {
  54.     -webkit-transform: scale3d(0.4, 0.4, 1);
  55.             transform: scale3d(0.4, 0.4, 1);
  56.   }
  57.   50% {
  58.     -webkit-transform: scale3d(2.2, 2.2, 1);
  59.             transform: scale3d(2.2, 2.2, 1);
  60.   }
  61.   100% {
  62.     -webkit-transform: scale3d(0.4, 0.4, 1);
  63.             transform: scale3d(0.4, 0.4, 1);
  64.   }
  65. }
  66. .circle-container:nth-child(1) {
  67.   width: 10px;
  68.   height: 10px;
  69.   -webkit-animation-name: move-frames-1;
  70.           animation-name: move-frames-1;
  71.   -webkit-animation-duration: 8441ms;
  72.           animation-duration: 8441ms;
  73.   -webkit-animation-delay: 4544ms;
  74.           animation-delay: 4544ms;
  75. }
  76. @-webkit-keyframes move-frames-1 {
  77.   from {
  78.     -webkit-transform: translate3d(50vw, 102vh, 0);
  79.             transform: translate3d(50vw, 102vh, 0);
  80.   }
  81.   to {
  82.     -webkit-transform: translate3d(2vw, -117vh, 0);
  83.             transform: translate3d(2vw, -117vh, 0);
  84.   }
  85. }
  86. @keyframes move-frames-1 {
  87.   from {
  88.     -webkit-transform: translate3d(50vw, 102vh, 0);
  89.             transform: translate3d(50vw, 102vh, 0);
  90.   }
  91.   to {
  92.     -webkit-transform: translate3d(2vw, -117vh, 0);
  93.             transform: translate3d(2vw, -117vh, 0);
  94.   }
  95. }
  96. .circle-container:nth-child(1) .circle {
  97.   -webkit-animation-delay: 3734ms;
  98.           animation-delay: 3734ms;
  99. }
  100. .circle-container:nth-child(2) {
  101.   width: 10px;
  102.   height: 10px;
  103.   -webkit-animation-name: move-frames-2;
  104.           animation-name: move-frames-2;
  105.   -webkit-animation-duration: 9921ms;
  106.           animation-duration: 9921ms;
  107.   -webkit-animation-delay: 5982ms;
  108.           animation-delay: 5982ms;
  109. }
  110. @-webkit-keyframes move-frames-2 {
  111.   from {
  112.     -webkit-transform: translate3d(89vw, 108vh, 0);
  113.             transform: translate3d(89vw, 108vh, 0);
  114.   }
  115.   to {
  116.     -webkit-transform: translate3d(72vw, -123vh, 0);
  117.             transform: translate3d(72vw, -123vh, 0);
  118.   }
  119. }
  120. @keyframes move-frames-2 {
  121.   from {
  122.     -webkit-transform: translate3d(89vw, 108vh, 0);
  123.             transform: translate3d(89vw, 108vh, 0);
  124.   }
  125.   to {
  126.     -webkit-transform: translate3d(72vw, -123vh, 0);
  127.             transform: translate3d(72vw, -123vh, 0);
  128.   }
  129. }
  130. .circle-container:nth-child(2) .circle {
  131.   -webkit-animation-delay: 2516ms;
  132.           animation-delay: 2516ms;
  133. }
  134. .circle-container:nth-child(3) {
  135.   width: 3px;
  136.   height: 3px;
  137.   -webkit-animation-name: move-frames-3;
  138.           animation-name: move-frames-3;
  139.   -webkit-animation-duration: 10427ms;
  140.           animation-duration: 10427ms;
  141.   -webkit-animation-delay: 3649ms;
  142.           animation-delay: 3649ms;
  143. }
  144. @-webkit-keyframes move-frames-3 {
  145.   from {
  146.     -webkit-transform: translate3d(85vw, 107vh, 0);
  147.             transform: translate3d(85vw, 107vh, 0);
  148.   }
  149.   to {
  150.     -webkit-transform: translate3d(30vw, -133vh, 0);
  151.             transform: translate3d(30vw, -133vh, 0);
  152.   }
  153. }
  154. @keyframes move-frames-3 {
  155.   from {
  156.     -webkit-transform: translate3d(85vw, 107vh, 0);
  157.             transform: translate3d(85vw, 107vh, 0);
  158.   }
  159.   to {
  160.     -webkit-transform: translate3d(30vw, -133vh, 0);
  161.             transform: translate3d(30vw, -133vh, 0);
  162.   }
  163. }
  164. .circle-container:nth-child(3) .circle {
  165.   -webkit-animation-delay: 731ms;
  166.           animation-delay: 731ms;
  167. }
  168. .circle-container:nth-child(4) {
  169.   width: 6px;
  170.   height: 6px;
  171.   -webkit-animation-name: move-frames-4;
  172.           animation-name: move-frames-4;
  173.   -webkit-animation-duration: 10951ms;
  174.           animation-duration: 10951ms;
  175.   -webkit-animation-delay: 8909ms;
  176.           animation-delay: 8909ms;
  177. }
  178. @-webkit-keyframes move-frames-4 {
  179.   from {
  180.     -webkit-transform: translate3d(50vw, 104vh, 0);
  181.             transform: translate3d(50vw, 104vh, 0);
  182.   }
  183.   to {
  184.     -webkit-transform: translate3d(74vw, -122vh, 0);
  185.             transform: translate3d(74vw, -122vh, 0);
  186.   }
  187. }
  188. @keyframes move-frames-4 {
  189.   from {
  190.     -webkit-transform: translate3d(50vw, 104vh, 0);
  191.             transform: translate3d(50vw, 104vh, 0);
  192.   }
  193.   to {
  194.     -webkit-transform: translate3d(74vw, -122vh, 0);
  195.             transform: translate3d(74vw, -122vh, 0);
  196.   }
  197. }
  198. .circle-container:nth-child(4) .circle {
  199.   -webkit-animation-delay: 2526ms;
  200.           animation-delay: 2526ms;
  201. }
  202. .circle-container:nth-child(5) {
  203.   width: 5px;
  204.   height: 5px;
  205.   -webkit-animation-name: move-frames-5;
  206.           animation-name: move-frames-5;
  207.   -webkit-animation-duration: 7642ms;
  208.           animation-duration: 7642ms;
  209.   -webkit-animation-delay: 2502ms;
  210.           animation-delay: 2502ms;
  211. }
  212. @-webkit-keyframes move-frames-5 {
  213.   from {
  214.     -webkit-transform: translate3d(9vw, 108vh, 0);
  215.             transform: translate3d(9vw, 108vh, 0);
  216.   }
  217.   to {
  218.     -webkit-transform: translate3d(39vw, -126vh, 0);
  219.             transform: translate3d(39vw, -126vh, 0);
  220.   }
  221. }
  222. @keyframes move-frames-5 {
  223.   from {
  224.     -webkit-transform: translate3d(9vw, 108vh, 0);
  225.             transform: translate3d(9vw, 108vh, 0);
  226.   }
  227.   to {
  228.     -webkit-transform: translate3d(39vw, -126vh, 0);
  229.             transform: translate3d(39vw, -126vh, 0);
  230.   }
  231. }
  232. .circle-container:nth-child(5) .circle {
  233.   -webkit-animation-delay: 2755ms;
  234.           animation-delay: 2755ms;
  235. }
  236. .circle-container:nth-child(6) {
  237.   width: 6px;
  238.   height: 6px;
  239.   -webkit-animation-name: move-frames-6;
  240.           animation-name: move-frames-6;
  241.   -webkit-animation-duration: 8439ms;
  242.           animation-duration: 8439ms;
  243.   -webkit-animation-delay: 455ms;
  244.           animation-delay: 455ms;
  245. }
  246. @-webkit-keyframes move-frames-6 {
  247.   from {
  248.     -webkit-transform: translate3d(29vw, 101vh, 0);
  249.             transform: translate3d(29vw, 101vh, 0);
  250.   }
  251.   to {
  252.     -webkit-transform: translate3d(21vw, -109vh, 0);
  253.             transform: translate3d(21vw, -109vh, 0);
  254.   }
  255. }
  256. @keyframes move-frames-6 {
  257.   from {
  258.     -webkit-transform: translate3d(29vw, 101vh, 0);
  259.             transform: translate3d(29vw, 101vh, 0);
  260.   }
  261.   to {
  262.     -webkit-transform: translate3d(21vw, -109vh, 0);
  263.             transform: translate3d(21vw, -109vh, 0);
  264.   }
  265. }
  266. .circle-container:nth-child(6) .circle {
  267.   -webkit-animation-delay: 3506ms;
  268.           animation-delay: 3506ms;
  269. }
  270. .circle-container:nth-child(7) {
  271.   width: 8px;
  272.   height: 8px;
  273.   -webkit-animation-name: move-frames-7;
  274.           animation-name: move-frames-7;
  275.   -webkit-animation-duration: 7539ms;
  276.           animation-duration: 7539ms;
  277.   -webkit-animation-delay: 3595ms;
  278.           animation-delay: 3595ms;
  279. }
  280. @-webkit-keyframes move-frames-7 {
  281.   from {
  282.     -webkit-transform: translate3d(11vw, 101vh, 0);
  283.             transform: translate3d(11vw, 101vh, 0);
  284.   }
  285.   to {
  286.     -webkit-transform: translate3d(31vw, -125vh, 0);
  287.             transform: translate3d(31vw, -125vh, 0);
  288.   }
  289. }
  290. @keyframes move-frames-7 {
  291.   from {
  292.     -webkit-transform: translate3d(11vw, 101vh, 0);
  293.             transform: translate3d(11vw, 101vh, 0);
  294.   }
  295.   to {
  296.     -webkit-transform: translate3d(31vw, -125vh, 0);
  297.             transform: translate3d(31vw, -125vh, 0);
  298.   }
  299. }
  300. .circle-container:nth-child(7) .circle {
  301.   -webkit-animation-delay: 749ms;
  302.           animation-delay: 749ms;
  303. }
  304. .circle-container:nth-child(8) {
  305.   width: 4px;
  306.   height: 4px;
  307.   -webkit-animation-name: move-frames-8;
  308.           animation-name: move-frames-8;
  309.   -webkit-animation-duration: 7480ms;
  310.           animation-duration: 7480ms;
  311.   -webkit-animation-delay: 2680ms;
  312.           animation-delay: 2680ms;
  313. }
  314. @-webkit-keyframes move-frames-8 {
  315.   from {
  316.     -webkit-transform: translate3d(15vw, 101vh, 0);
  317.             transform: translate3d(15vw, 101vh, 0);
  318.   }
  319.   to {
  320.     -webkit-transform: translate3d(88vw, -111vh, 0);
  321.             transform: translate3d(88vw, -111vh, 0);
  322.   }
  323. }
  324. @keyframes move-frames-8 {
  325.   from {
  326.     -webkit-transform: translate3d(15vw, 101vh, 0);
  327.             transform: translate3d(15vw, 101vh, 0);
  328.   }
  329.   to {
  330.     -webkit-transform: translate3d(88vw, -111vh, 0);
  331.             transform: translate3d(88vw, -111vh, 0);
  332.   }
  333. }
  334. .circle-container:nth-child(8) .circle {
  335.   -webkit-animation-delay: 1888ms;
  336.           animation-delay: 1888ms;
  337. }
  338. .circle-container:nth-child(9) {
  339.   width: 2px;
  340.   height: 2px;
  341.   -webkit-animation-name: move-frames-9;
  342.           animation-name: move-frames-9;
  343.   -webkit-animation-duration: 9087ms;
  344.           animation-duration: 9087ms;
  345.   -webkit-animation-delay: 9461ms;
  346.           animation-delay: 9461ms;
  347. }
  348. @-webkit-keyframes move-frames-9 {
  349.   from {
  350.     -webkit-transform: translate3d(100vw, 107vh, 0);
  351.             transform: translate3d(100vw, 107vh, 0);
  352.   }
  353.   to {
  354.     -webkit-transform: translate3d(40vw, -130vh, 0);
  355.             transform: translate3d(40vw, -130vh, 0);
  356.   }
  357. }
  358. @keyframes move-frames-9 {
  359.   from {
  360.     -webkit-transform: translate3d(100vw, 107vh, 0);
  361.             transform: translate3d(100vw, 107vh, 0);
  362.   }
  363.   to {
  364.     -webkit-transform: translate3d(40vw, -130vh, 0);
  365.             transform: translate3d(40vw, -130vh, 0);
  366.   }
  367. }
  368. .circle-container:nth-child(9) .circle {
  369.   -webkit-animation-delay: 1721ms;
  370.           animation-delay: 1721ms;
  371. }
  372. .circle-container:nth-child(10) {
  373.   width: 8px;
  374.   height: 8px;
  375.   -webkit-animation-name: move-frames-10;
  376.           animation-name: move-frames-10;
  377.   -webkit-animation-duration: 9860ms;
  378.           animation-duration: 9860ms;
  379.   -webkit-animation-delay: 8969ms;
  380.           animation-delay: 8969ms;
  381. }
  382. @-webkit-keyframes move-frames-10 {
  383.   from {
  384.     -webkit-transform: translate3d(74vw, 110vh, 0);
  385.             transform: translate3d(74vw, 110vh, 0);
  386.   }
  387.   to {
  388.     -webkit-transform: translate3d(30vw, -127vh, 0);
  389.             transform: translate3d(30vw, -127vh, 0);
  390.   }
  391. }
  392. @keyframes move-frames-10 {
  393.   from {
  394.     -webkit-transform: translate3d(74vw, 110vh, 0);
  395.             transform: translate3d(74vw, 110vh, 0);
  396.   }
  397.   to {
  398.     -webkit-transform: translate3d(30vw, -127vh, 0);
  399.             transform: translate3d(30vw, -127vh, 0);
  400.   }
  401. }
  402. .circle-container:nth-child(10) .circle {
  403.   -webkit-animation-delay: 1801ms;
  404.           animation-delay: 1801ms;
  405. }
  406. .circle-container:nth-child(11) {
  407.   width: 1px;
  408.   height: 1px;
  409.   -webkit-animation-name: move-frames-11;
  410.           animation-name: move-frames-11;
  411.   -webkit-animation-duration: 9292ms;
  412.           animation-duration: 9292ms;
  413.   -webkit-animation-delay: 9812ms;
  414.           animation-delay: 9812ms;
  415. }

8.  最后 

最后呢，祝大家2023年心想事成

  • 【手把手、从零到一】SpringBoot+SpringCloud+Vue前后端分离实战项目，专栏持续火热更新中。。。
  • 主流技术，细节到位，前后端由两位【十年多】的高级架构师操刀
  • 作为毕设项目、入门项目、或者准备进阶提升竞争力的小伙伴，可以【订阅本专栏】哦
  • 前端部分 ：https://blog.csdn.net/xingyu_qie/category_12222258.html
  • 服务端部分 ：https://blog.csdn.net/scm_2008/category_12236048.html
  • 粉丝福利：订阅的粉丝可加微信，对文章的内容进行【一对一指导】！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/207659
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号