CSS实现两个元素相融效果(粘滞效果)
发布时间：2020-10-12 17:05:31 作者：heath_learning 
我要评论
我要评论这篇文章主要介绍了CSS实现两个元素相融效果(粘滞效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
记得前几年手机版淘宝左下角有个狠有意思的圆形按钮，点击后会出现几个小按钮，并且出场动画很有意思，后面才知道这种效果叫“粘滞”效果，如图：
那这种效果到底用了什么属性呢？答案是主要用了filter:blur()属性，及filter:contrast()属性配合
<style>
body{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 500px;
height: 500px;
filter: contrast(20);
/* 背景色一定要为实底色，否则两个元素边缘会有模糊效果 */
background-color: #fff;
}
.circle-big{
position: absolute;
top: 20px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
filter: blur(6px);
box-sizing: border-box;
animation: toRight 3s ease-out infinite;
background-color: #333;
}
.circle-small{
position: absolute;
top: 35px;
left: 220px;
width: 60px;
height: 60px;
border-radius: 50%;
filter: blur(6px);
box-sizing: border-box;
animation: toLeft 3s ease-out infinite;
background-color: #FFFC00;
}
@keyframes toRight{
50%{
left: 150px;
}
}
@keyframes toLeft{
50%{
left: 150px;
}
}
</style>
<div class="box">
<div class="circle-big"></div>
<div class="circle-small"></div>
</div>
最终效果如图：
到此这篇关于CSS实现两个元素相融效果(粘滞效果)的文章就介绍到这了,更多相关CSS两个元素相融内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 css3 实现元素融合效果，感兴趣的朋友跟随小编2023-02-14
在 CSS 中使用 mask 遮罩，一行代码实现头像与国旗的融合效果，那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢？感兴趣的朋友跟随小编一2021-10-21
这篇文章主要介绍了html+css实现充电水滴融合特效代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-28
这篇文章主要介绍了纯 CSS 实现蜡烛融化(水滴)的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一2020-11-11- 万物都是相通的, 软件和互联网技术也一样. 如果图片作为网络资源需要每个进行连接来获取, 那么 .js 文件和 .css 文件也是如此. 我们应该将可能放在一起的资源绑起来. 这样2009-12-17
这篇文章将介绍如何使用CSS实现交融文字效果，这是一种独特的标题设计，可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性，我们可以创建出字母之间交2023-04-27
最新评论