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

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>

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

CSS 之 posiiton：fixed 固定定位在父元素含有 tranform 属性时会失效，变成 absolute 的效果
一.简介今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...
css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
css filter blur 白边,CSS3的blur白边怎么去除
这次给大家带来CSS3的blur白边怎么去除,去除CSS3的blur白边注意事项有哪些,下面就是实战案例,一起来看一下. 做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = ...
CSS磨砂玻璃穿透效果 filter: blur(4px)；
文章目录一.参考二.问题描述三.原理说明四.项目代码说明一.参考纯CSS教你实现磨砂玻璃背景效果(附代码) 二.问题描述工作中,UCD 设计了一个"磨砂穿透"的效果, ...
如何实现背景图片的高斯模糊（毛玻璃边）效果 filter: blur(5px)
如何实现背景图片的高斯模糊(毛玻璃边)效果 filter: blur(5px) 在一次偶然的机会下发现css的一个属性,可以实现背景色/背景图片的高斯模糊(毛玻璃边)效果. 先上图看一下所谓的高斯模糊 ...
filter:blur() 实现毛玻璃效果
使用玻璃效果比普通效果中的文字更易阅读,而且整体美观.在过去,我们通常把文本框区域的背景做模糊处理,随后使用一整张背景.不仅消耗性能,而且在HTML方面难以修改维护. 我们用filter:blur() ...
CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)
CSS毛玻璃效果可以通过filter: blur()实现,类似PS高斯模糊,图片和背景都可以使用:但在移动端,会造成卡顿,不建议在移动端使用: CSS: .blur{-webkit-filter: b ...
❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别
请先忽略背景图,遮罩位置是随便放的,我们主要关注下面的代码↓ <!doctype html> <html lang="en"> <head>&l ...

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

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

最新文章

热门文章