css-filter属性-融合效果-1.1

首先灰常感谢你所不知道的 CSS 滤镜技巧与细节。我看完这个filter属性后还是迷迷糊糊的。因为不清楚能干什么。但看完这篇文章的例子后发现filter属性真的很厉害。

现在记录一些我的理解。

融合效果

如果你想直接看动图效果建议去上面的文章看，因为我不会做动图。不过可以大致截个图。

前面的图是有融合效果的，那正常的如果两个圆交叠是什么样子的呢？

就是这个样子，你们可以对比一下，发现了么？

为什么会有这种粘稠的感觉呢？他是先通过模糊，让一定区域内都有颜色，然后当两个圆交汇的时候，两个颜色融合也会形成颜色。然后再通过加强对比度，让边缘颜色不深的地方变得不明显，这样就形成了粘稠的效果。不懂？来上步骤。

<!doctype html>
<html lang="zh">
<head><style>.base {background: #fff;height: 200px;position: absolute;width: 300px;}.base::before {background: #333;border-radius: 50%;content: "";height: 120px;left: 50px;position: absolute;top: 40px;width: 120px;}.base::after {background: #3F51B5;border-radius: 50%;content: "";height: 80px;left: 10px;position: absolute;top: 60px;width: 80px;}</style>
</head>
<body><div class="base"></div>
</body>
</html>

先定义两个圆。然后加模糊。代码就是给before和after的样式加

filter: blur(6px);

看到毛边没，这个其实就是粘稠感的根源。这个时候我们不能一直这样模糊的呀，不然什么也看不清。加大对比度，让毛边看不清。这时候我们给base加样式

filter: contrast(20);

您要的粘稠感已送达，请注意查收。一波代码正在来袭，请做好准备。

<!doctype html>
<html lang="zh">
<head><style>.base {background: #fff;filter: contrast(20);height: 200px;position: absolute;width: 300px;}.base::before {background: #333;border-radius: 50%;content: "";filter: blur(6px);height: 120px;left: 50px;position: absolute;top: 40px;width: 120px;}.base::after {background: #3F51B5;border-radius: 50%;content: "";filter: blur(6px);height: 80px;left: 10px;position: absolute;top: 60px;width: 80px;}</style>
</head>
<body><div class="base"></div>
</body>
</html>

css-filter属性-融合效果-1.1相关推荐

深入学习下 CSS filter 相关的神奇属性
来源 | https://www.cnblogs.com/dragonir/p/14807272.html 作者 | dragonir 背景基本概念 css filter 属性将模糊或颜色偏移等图形 ...
html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
CSS filter有哪些神奇用途
来源 | https://www.cnblogs.com/dragonir/p/14807272.html 作者 | dragonir 背景基本概念 css filter 属性将模糊或颜色偏移等图形 ...
`CSS filter` 有哪些神奇用途
CSS filter 有哪些神奇用途 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZmlSog1-1652076154463)(https://p6-juejin. ...
CSS filter 有哪些神奇用途
背景基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function ...
CSS filter有哪些用途
css filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function> 或使用 ...
java做出毛玻璃效果_手把手教你CSS如何实现毛玻璃效果
今天在做一个登录界面的时候,由于视觉给的页面背景图片太鲜艳亮眼,导致页面中间的登录表单框很不显眼,效果很差.就想到了做成毛玻璃的效果,现在分享出来,大家一起看看吧. 页面结构如下: 由于之前用过CSS ...
【css技巧】CSS filter的神奇用法 | 褪色|融合效果等
前言 css3的filter可以修改图片的可视效果,用的好堪比美图秀秀,做出来的网页非常炫酷,装上一个大比! 但是也不能滥用,毕竟兼容性摆在那里,用多了还可能卡. 你们看看,一张图加了filter效果 ...
html滤镜无效果,为什么css滤镜(filter属性)没用？
为什么css滤镜(filter属性)没用?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 滤镜filter属性,可以对网页中的图片进行类似Photosho ...

css-filter属性-融合效果-1.1

css-filter属性-融合效果-1.1相关推荐

最新文章

热门文章