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

Posted 经海路大白狗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习CSS3，模拟春雪漫天飘的动画效果相关的知识，希望对你有一定的参考价值。

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

目录

1. 实现思路

2. 部分HTML代码 

3. 夜空的背景 

4. 雪花的样式 

5. 粒子飞升效果 

6. HTML完整源代码 

7. CSS3完整源代码

8.  最后 

1. 实现思路

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

2. 部分html代码 

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

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  ......
  <!-- 此处重复此处越多，效果越好 -->
</div>

3. 夜空的背景 

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

body 
  background-image: radial-gradient(#021027, #000000);


.container 
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);

4. 雪花的样式 

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

.circle-container .circle 
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;


@-webkit-keyframes scale-frames 
  0% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  
  50% 
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  
  100% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);

5. 粒子飞升效果 

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

6. HTML完整源代码 

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

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>漫天飘雪</title>

<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
</div>


</body></html>

7. CSS3完整源代码

html,
body 
  width: 100%;
  height: 100%;
  padding:0;margin:0;


body 
  background-image: radial-gradient(#021027, #000000);


.container 
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: rotate(180deg);


.circle-container 
  position: absolute;
  -webkit-transform: translateY(-10vh);
          transform: translateY(-10vh);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;

.circle-container .circle 
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(#99ffff, #99ffff 10%, rgba(153, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;


@-webkit-keyframes scale-frames 
  0% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  
  50% 
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  
  100% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  

@keyframes scale-frames 
  0% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  
  50% 
    -webkit-transform: scale3d(2.2, 2.2, 1);
            transform: scale3d(2.2, 2.2, 1);
  
  100% 
    -webkit-transform: scale3d(0.4, 0.4, 1);
            transform: scale3d(0.4, 0.4, 1);
  

.circle-container:nth-child(1) 
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-1;
          animation-name: move-frames-1;
  -webkit-animation-duration: 8441ms;
          animation-duration: 8441ms;
  -webkit-animation-delay: 4544ms;
          animation-delay: 4544ms;

@-webkit-keyframes move-frames-1 
  from 
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  
  to 
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  

@keyframes move-frames-1 
  from 
    -webkit-transform: translate3d(50vw, 102vh, 0);
            transform: translate3d(50vw, 102vh, 0);
  
  to 
    -webkit-transform: translate3d(2vw, -117vh, 0);
            transform: translate3d(2vw, -117vh, 0);
  

.circle-container:nth-child(1) .circle 
  -webkit-animation-delay: 3734ms;
          animation-delay: 3734ms;

.circle-container:nth-child(2) 
  width: 10px;
  height: 10px;
  -webkit-animation-name: move-frames-2;
          animation-name: move-frames-2;
  -webkit-animation-duration: 9921ms;
          animation-duration: 9921ms;
  -webkit-animation-delay: 5982ms;
          animation-delay: 5982ms;

@-webkit-keyframes move-frames-2 
  from 
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  
  to 
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  

@keyframes move-frames-2 
  from 
    -webkit-transform: translate3d(89vw, 108vh, 0);
            transform: translate3d(89vw, 108vh, 0);
  
  to 
    -webkit-transform: translate3d(72vw, -123vh, 0);
            transform: translate3d(72vw, -123vh, 0);
  

.circle-container:nth-child(2) .circle 
  -webkit-animation-delay: 2516ms;
          animation-delay: 2516ms;

.circle-container:nth-child(3) 
  width: 3px;
  height: 3px;
  -webkit-animation-name: move-frames-3;
          animation-name: move-frames-3;
  -webkit-animation-duration: 10427ms;
          animation-duration: 10427ms;
  -webkit-animation-delay: 3649ms;
          animation-delay: 3649ms;

@-webkit-keyframes move-frames-3 
  from 
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  
  to 
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  

@keyframes move-frames-3 
  from 
    -webkit-transform: translate3d(85vw, 107vh, 0);
            transform: translate3d(85vw, 107vh, 0);
  
  to 
    -webkit-transform: translate3d(30vw, -133vh, 0);
            transform: translate3d(30vw, -133vh, 0);
  

.circle-container:nth-child(3) .circle 
  -webkit-animation-delay: 731ms;
          animation-delay: 731ms;

.circle-container:nth-child(4) 
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-4;
          animation-name: move-frames-4;
  -webkit-animation-duration: 10951ms;
          animation-duration: 10951ms;
  -webkit-animation-delay: 8909ms;
          animation-delay: 8909ms;

@-webkit-keyframes move-frames-4 
  from 
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  
  to 
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  

@keyframes move-frames-4 
  from 
    -webkit-transform: translate3d(50vw, 104vh, 0);
            transform: translate3d(50vw, 104vh, 0);
  
  to 
    -webkit-transform: translate3d(74vw, -122vh, 0);
            transform: translate3d(74vw, -122vh, 0);
  

.circle-container:nth-child(4) .circle 
  -webkit-animation-delay: 2526ms;
          animation-delay: 2526ms;

.circle-container:nth-child(5) 
  width: 5px;
  height: 5px;
  -webkit-animation-name: move-frames-5;
          animation-name: move-frames-5;
  -webkit-animation-duration: 7642ms;
          animation-duration: 7642ms;
  -webkit-animation-delay: 2502ms;
          animation-delay: 2502ms;

@-webkit-keyframes move-frames-5 
  from 
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  
  to 
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  

@keyframes move-frames-5 
  from 
    -webkit-transform: translate3d(9vw, 108vh, 0);
            transform: translate3d(9vw, 108vh, 0);
  
  to 
    -webkit-transform: translate3d(39vw, -126vh, 0);
            transform: translate3d(39vw, -126vh, 0);
  

.circle-container:nth-child(5) .circle 
  -webkit-animation-delay: 2755ms;
          animation-delay: 2755ms;

.circle-container:nth-child(6) 
  width: 6px;
  height: 6px;
  -webkit-animation-name: move-frames-6;
          animation-name: move-frames-6;
  -webkit-animation-duration: 8439ms;
          animation-duration: 8439ms;
  -webkit-animation-delay: 455ms;
          animation-delay: 455ms;

@-webkit-keyframes move-frames-6 
  from 
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  

@keyframes move-frames-6 
  from 
    -webkit-transform: translate3d(29vw, 101vh, 0);
            transform: translate3d(29vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(21vw, -109vh, 0);
            transform: translate3d(21vw, -109vh, 0);
  

.circle-container:nth-child(6) .circle 
  -webkit-animation-delay: 3506ms;
          animation-delay: 3506ms;

.circle-container:nth-child(7) 
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-7;
          animation-name: move-frames-7;
  -webkit-animation-duration: 7539ms;
          animation-duration: 7539ms;
  -webkit-animation-delay: 3595ms;
          animation-delay: 3595ms;

@-webkit-keyframes move-frames-7 
  from 
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  

@keyframes move-frames-7 
  from 
    -webkit-transform: translate3d(11vw, 101vh, 0);
            transform: translate3d(11vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(31vw, -125vh, 0);
            transform: translate3d(31vw, -125vh, 0);
  

.circle-container:nth-child(7) .circle 
  -webkit-animation-delay: 749ms;
          animation-delay: 749ms;

.circle-container:nth-child(8) 
  width: 4px;
  height: 4px;
  -webkit-animation-name: move-frames-8;
          animation-name: move-frames-8;
  -webkit-animation-duration: 7480ms;
          animation-duration: 7480ms;
  -webkit-animation-delay: 2680ms;
          animation-delay: 2680ms;

@-webkit-keyframes move-frames-8 
  from 
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  

@keyframes move-frames-8 
  from 
    -webkit-transform: translate3d(15vw, 101vh, 0);
            transform: translate3d(15vw, 101vh, 0);
  
  to 
    -webkit-transform: translate3d(88vw, -111vh, 0);
            transform: translate3d(88vw, -111vh, 0);
  

.circle-container:nth-child(8) .circle 
  -webkit-animation-delay: 1888ms;
          animation-delay: 1888ms;

.circle-container:nth-child(9) 
  width: 2px;
  height: 2px;
  -webkit-animation-name: move-frames-9;
          animation-name: move-frames-9;
  -webkit-animation-duration: 9087ms;
          animation-duration: 9087ms;
  -webkit-animation-delay: 9461ms;
          animation-delay: 9461ms;

@-webkit-keyframes move-frames-9 
  from 
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  
  to 
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  

@keyframes move-frames-9 
  from 
    -webkit-transform: translate3d(100vw, 107vh, 0);
            transform: translate3d(100vw, 107vh, 0);
  
  to 
    -webkit-transform: translate3d(40vw, -130vh, 0);
            transform: translate3d(40vw, -130vh, 0);
  

.circle-container:nth-child(9) .circle 
  -webkit-animation-delay: 1721ms;
          animation-delay: 1721ms;

.circle-container:nth-child(10) 
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-10;
          animation-name: move-frames-10;
  -webkit-animation-duration: 9860ms;
          animation-duration: 9860ms;
  -webkit-animation-delay: 8969ms;
          animation-delay: 8969ms;

@-webkit-keyframes move-frames-10 
  from 
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  
  to 
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  

@keyframes move-frames-10 
  from 
    -webkit-transform: translate3d(74vw, 110vh, 0);
            transform: translate3d(74vw, 110vh, 0);
  
  to 
    -webkit-transform: translate3d(30vw, -127vh, 0);
            transform: translate3d(30vw, -127vh, 0);
  

.circle-container:nth-child(10) .circle 
  -webkit-animation-delay: 1801ms;
          animation-delay: 1801ms;

.circle-container:nth-child(11) 
  width: 1px;
  height: 1px;
  -webkit-animation-name: move-frames-11;
          animation-name: move-frames-11;
  -webkit-animation-duration: 9292ms;
          animation-duration: 9292ms;
  -webkit-animation-delay: 9812ms;
          animation-delay: 9812ms;

8.  最后 

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

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

使用强大的 CSS 滤镜实现安卓充电动画效果

用安卓手机的同学肯定不陌生，这个是安卓手机在充电的时候的效果。看到这个我就很好奇，使用 CSS 能做到吗？

经过一番尝试，发现使用 CSS 也是可以很好的模拟这种动画效果：

知识点

拆解一下知识点，最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜，可以很好的实现这种融合效果。

单独将两个滤镜拿出来，它们的作用分别是：

  1. filter: blur()： 给图像设置高斯模糊效果。
  2. filter: contrast()： 调整图像的对比度。

但是，当他们“合体”的时候，产生了奇妙的融合现象。

先来看一个简单的例子：

仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，

通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。

颜色的变换

当然，这里也是可以加上颜色的变换，效果也很不错：

容易忽视的点

通过调节 filter: blur() 及 filter: contrast() 属性的值，动画效果其实会有很大程度的变化，好的效果需要不断的调试。

当然，经验在其中也是发挥了很重要的作用，说到底还是要多尝试。

 

如果还有什么疑问或者建议，可以多多交流，文中若有不正之处，万望告知。

以上是关于学习CSS3，模拟春雪漫天飘的动画效果的主要内容，如果未能解决你的问题，请参考以下文章

用CSS3制作50个超棒动画效果教程

CSS3自动打字动画，让你的文字动起来！

干货｜CSS3自动打字动画，让你的文字动起来！

css3动画为啥就是不动呢

css3动画

CSS3动画