css 融合效果

前端

实现基于两点：

  1. 图形是在被设置了 filter: contrast() 的画布背景上进行动画的
  2. 进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需要是被设置了 filter: contrast() 的画布）

意思是，上面两圆运动的背后，其实是叠加了一张设置了 filter: contrast() 的白色背景，而两个圆形则被设置了 filter: blur() ，两个条件缺一不可。

  1. <div class=“container”>  
  2.   <div class=“filter-mix”></div>  
  3. </div>  
  1. .filter-mix {  
  2.   position: absolute;  
  3.   top: 50%;  
  4.   left: 50%;  
  5.   transform: translate(-50%, -50%);  
  6.   width: 400px;  
  7.   height: 200px;  
  8.   filter: contrast(20);  
  9.   background: #fff;  
  10. }  
  11.   
  12. .filter-mix::before {  
  13.   content: “”;  
  14.   position: absolute;  
  15.   width: 100px;  
  16.   height: 100px;  
  17.   border-radius: 50%;  
  18.   background: #333;  
  19.   top: 50px;  
  20.   left: 40px;  
  21.   z-index: 2;  
  22.   filter: blur(10px);  
  23.   box-sizing: border-box;  
  24.   animation: filterBallMove 6s ease-out infinite;  
  25. }  
  26.   
  27. .filter-mix::after {  
  28.   content: “”;  
  29.   position: absolute;  
  30.   width: 80px;  
  31.   height: 80px;  
  32.   border-radius: 50%;  
  33.   background: red;  
  34.   top: 60px;  
  35.   rightright: 40px;  
  36.   z-index: 2;  
  37.   filter: blur(10px);  
  38.   animation: filterBallMove2 6s ease-out infinite;  
  39. }  
  40.   
  41. @keyframes filterBallMove {  
  42.   50% {  
  43.     left: 200px;  
  44.   }  
  45. }  
  46.   
  47. @keyframes filterBallMove2 {  
  48.   50% {  
  49.     rightright: 200px;  
  50.   }  
  51. }  

本文链接地址: css 融合效果

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注