您现在的位置是：网站首页> 编程资料编程资料

如何试着在你的css增加粘稠效果CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-03 889人已围观

简介这篇文章主要介绍了试着在你的css增加粘稠效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

写在前面

不知道是谁先发现filter:blur和filter:contrast能发生如此奇妙的化学反应的,但这不重要,重要的是你如果学会了这种特效的使用方法，就可以为你的网页添加酷炫的效果！那么请先看两个小小的demo

demo

怎么做？

仔细看，网页上的元素似乎都有了粘度，当元素靠的足够近时，会发生融合的效果，当元素远离时又会有一种黏住的效果，这又如何完成？

很简单你只需在子元素添加filter:blur（模糊），而在它的父级元素上增加contrast对比度即可

他们看起来就像这样（接下来以一个更简单的demo举例）：

代码部分:

 .wrapper{ width: 100%; height: 100vh; position: absolute; background-color: #333; filter:contrast(50) } .container { position: absolute; top:50%; left:50%; width: 200px; height: 100px; background-color: #00eeff; filter: blur(10px) ; } .box{ width:25px; height:25px; background-color: #00eeff; border-radius: 50%; position: absolute; left:50%; transition: 1s; filter: blur(1px); animation: move 1s linear infinite; } @keyframes move { 0%{ transform: translateY(0); } 100%{ transform: translateY(-100px); } }

你永远可以把代码copy下来自己尝试！

原理: