SVG滤镜实现粘连效果

最新推荐文章于 2021-05-25 20:52:08 发布

前端菜菜子

最新推荐文章于 2021-05-25 20:52:08 发布

阅读量224

点赞数

分类专栏： css 文章标签： svg 前端粘连效果

本文链接：https://blog.csdn.net/weixin_41552521/article/details/95966136

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述
第一次见到这种效果时，卧槽这个效果有点吊啊-----怎么实现的呢？我找了半天也没有找到，后来被我给找到了!
这么神奇的玩意我就直接贴代码了

html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="menu">
    <div class="menu-wrapper">
     <ul class="menu-items">
      <li class="menu-item">
       1
      </li>
      <li class="menu-item">
       2
      </li>
      <li class="menu-item">
       3
      </li>
      <li class="menu-item">
        4
       </li>
       <li class="menu-item">
         5
        </li>
     </ul>
    </div>
   </div>
   < --重点就是下面这段svg（我也不懂这玩意大概就是三层滤镜效果叠加）-- >
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <defs>
     <filter id="goo">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
       <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
       <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
     </filter>
   </defs>
 </svg>
</body>
</html>

css代码

body,html,li {
 padding: 0;
 margin: 0;
 list-style: none;
}
.menu {
	/* other styles */
	-webkit-filter: url("#goo");
	filter: url("../index.html#goo");
}

.menu li {
 width: 80px;
 height: 80px;
 margin-right: 6px;
 border-radius: 50%;
 background: #f90;
 text-align: center;
 line-height: 80px;
 font-size: 36px;
 color: #fff;
 font-weight: 700;
 float: left;
}

前端菜菜子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG滤镜实现粘连效果

第一次见到这种效果时，卧槽这个效果有点吊啊-----怎么实现的呢？我找了半天也没有找到，后来被我给找到了!html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫

专栏目录