css filter:blur和filter:contrast对比度能实现元素相交变得清晰并呈现水滴交融的效果

最新推荐文章于 2024-07-27 19:24:16 发布

神奇大叔

最新推荐文章于 2024-07-27 19:24:16 发布

阅读量1.4k

点赞数 1

分类专栏：我有奇妙动画文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_43294560/article/details/120976592

版权

我有奇妙动画专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何使用CSS的filter属性结合blur和contrast创建独特的视觉效果。通过在父元素上设置contrast和子元素上设置blur，可以实现元素间的水滴交融效果，或者在元素自身与伪元素间产生交融。示例代码展示了动态的模糊和对比度变化，为网页增添动态美感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter:blur会造成元素模糊
filter:contrast设置对比度,能实现元素更亮|淡

交融效果:
	方式一:元素设置filter:blur模糊,元素父级设置contrast时,会实现模糊元素相交产生水滴交融且相交部分变清晰的效果
		即:进行动画的图形的父元素需要是被设置了filter: contrast
	方式二:元素本身设置filter:contrast,对伪元素设置filter:blur模糊,会使得元素和伪元素产生交融

效果图:
在这里插入图片描述

代码示例:

body {
   /* background: #000; */
   /* background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%)); */
   /* background-color: #ebecf0; */
   background: #000;
   filter: contrast(100);
   overflow: hidden;
}
.ball {
   position: absolute;
   left: 0; 
   top: 40vh;
   height: 20vh;
   width: 20vh;
   border-radius: 50%;
   background: #fff;
   animation: move 10s infinite;
   z-index: 1;
   filter: blur(15px);
}

.g-wall {
   position: absolute;
   left: 20%; 
   top: 30vh;
   height: 40vh;
   width: 15vh;
   border-radius: 50%;
   background: red;
   filter: blur(15px) ;
   
}

@keyframes move {
   
   20% {
       transform: translate(20vw, 0);
       background: #ddd;
   }
   
   100% {
       transform: translate(100vw, 0);
       background: #ddd;
   }
}


<div class="ball"></div>

<div class="g-wall"></div>