使用CSS怎样实现元素粘滞效果？办法是什么？
发布时间：2022-01-20 15:51:02 所属栏目：语言 来源：互联网
导读：使用CSS怎样实现元素粘滞效果？很多朋友可以不是很了解什么是粘滞效果，也就是从一个元素中，点击会出现多个元素的效果，例如下文这样的点击分享的功能，那么这个效果是怎样做的呢？接下来就给大家简单的介绍一下。 那这种效果到底用了什么属性呢？答案是主
|
使用CSS怎样实现元素粘滞效果？很多朋友可以不是很了解什么是粘滞效果，也就是从一个元素中，点击会出现多个元素的效果，例如下文这样的点击分享的功能，那么这个效果是怎样做的呢？接下来就给大家简单的介绍一下。 那这种效果到底用了什么属性呢？答案是主要用了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>  （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
