掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

小tips: 0学习成本实现HTML元素粘滞融合效果

一、元素粘滞融合效果实现原来这么简单

页面任意位置塞入这么一段SVG代码:

<svg width="0" height="0" style="position:absolute;">
  <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>

需要粘滞融合元素的父元素CSS加一句:

filter: url("#goo");

效果就有了。

我们先来看一个简单例子:

<div>中有两个球,HTML如下:

<div class="target">
    <i class="ball"></i>
    <i class="ball"></i>
</div>

其中这个<div>设置:

.target {
   filter: url("#goo");
}

结果这两个圆滚滚的球靠近的时候,就相互融合在一起了,效果如下截图:

眼见为实,若PC电脑,您可以狠狠的点击这里:两个小球拖拽融合demo

拖动右边的圆球,靠近左边这一个,可以看到融合效果。

二、SVG粘滞融合效果的一些局限

此效果虽然很酷,实现也很简单。当下还是有一些局限的:

  1. 浏览器兼容性的问题,IE是不支持的,这其实没什么,当作渐进增强效果来处理就好了。但麻烦的是Safari浏览器,以及iPhone上微博或微信内置浏览器,虽然支持普通HTML元素应用SVG filter滤镜,但是,对于这里的融合效果滤镜,虽然有明显的bug,会有一些意想不到的样式表现。因此,如果希望把这个效果用在面向广大群众基础的产品上的时候,目前而言需要做类似下面处理:
    var ua = navigator.userAgent;
    if (/Safari|iPhone/i.test(ua) && /chrome/i.test(ua) == false) {
        document.body.classList.add('nofilter');
    }

    然后CSS这样写:

    body:not(.nofilter) .target {
       filter: url("#goo");
    }

    或者使用SVG来实现我们的效果,例如这里的球如果使用SVG元素绘制的话,包括IE浏览器在内,都有不错的效果。

  2. 此效果只适用于圆形元素。因为此效果的原理其实是:先让图形高斯模糊,再使用feColorMatrix滤镜增加alpha透明通道的对比度,于是可以把高斯模糊重合的部分进行合并,形成融合效果;最后使用feComposite滤镜的operator属性的atop值让原始的图形在上面显示。

    对于方形元素而言,就会出现问题,因为其四角边缘因为高斯模糊而变弯了,于是使用feColorMatrix滤镜alpha通道增强的时候,四边的直角会变成圆角,类似这样:

    感觉元素一下子浮肿了。

    如果元素原本就是个正圆,则没有这个问题,融合效果最好,因为正圆的高斯模糊它是均匀的。

  3. 应用滤镜的容器元素的尺寸要足够放下子元素。

三、SVG粘滞融合分享菜单实战

您可以狠狠地点击这里:带有融合粘滞效果的分享小交互demo

点击分享,就会出现常见社交分享按钮,然后相互间粘滞,同时分享按钮还会抖三抖,效果参见下面Gif:

实现步骤如下:

  1. 粘贴SVG滤镜代码(人人都会);
  2. 定位几个圈圈,同时加个transition过渡(原本就会);
  3. 容器设置filter: url("#goo")(简单);
  4. 点击时候几个圈圈重新换个位置;

此时粘滞效果就有了!

为了效果更佳灵动,我们还可以给分享按钮加一个小动画,我们可以从animate.css项目找一个合适的CSS3动画效果,例如jello,拷贝相关CSS代码,添加在分享按钮上。

于是就有了点击分享按钮,分享按钮弹几下,同时里面粘滞出现3个具体分析圈圈。

纯HTML和CSS实现,没有任何JS的参与!

兼容Chrome和Firefox浏览器,对于不支持的浏览器,就是普通的圈圈出现效果,也还不错哦!

低成本,高收益,还不速速用起来。

四、结束语

生命不息,研究不止,对于普通元素,Safari的融合渲染效果比较糟糕,而SVG元素filter属性滤镜则支持效果挺好。那我们是不是可以借助SVG forginObject元素来让Safari等现代浏览器都效果棒棒哒呢!

SVG forginObject元素可以在SVG中直接嵌套完整HTML片段,之前有文章专门介绍过:“SVG <foreignObject>简介与截图等应用”,是非常强的一个元素。

于是整了一段HTML代码测试:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
  <foreignObject width="600" height="300" filter="url(#goo)">
      <body xmlns="http://www.w3.org/1999/xhtml">
          <style type="text/css">
        .ball {
            width: 200px; height: 200px;
            border-radius: 50%;
            background-color: #beceeb;
            display: inline-block;
        }
        </style>
        <i id="ball1" class="ball"></i><i id="ball2" class="ball"></i>
      </body>
    </foreignObject>
</svg>

结果Chrome,Firefox浏览器都融合的不错,如下截图:

foreignObject 下的元素融合效果

但是在Safari浏览器下:

Safari浏览器下的粘滞效果截图

一副错位打kiss即视感-。

因此,还是需要通过JS手段hack掉Safari浏览器。

原文来自:鑫空间鑫生活

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

  • 涉农贷款地址识别

    涉农贷款地址识别,支持对私和对公两种方式。输入地址的行政区划越完整,识别准确度越高。

    涉农贷款地址识别,支持对私和对公两种方式。输入地址的行政区划越完整,识别准确度越高。

  • 人脸四要素

    根据给定的手机号、姓名、身份证、人像图片核验是否一致

    根据给定的手机号、姓名、身份证、人像图片核验是否一致

  • 个人/企业涉诉查询

    通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

    通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。

  • IP反查域名

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

    IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。

  • 人脸卫士

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

    结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。

0512-88869195
数 据 驱 动 未 来
Data Drives The Future