页面任意位置塞入这么一段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
拖动右边的圆球,靠近左边这一个,可以看到融合效果。
此效果虽然很酷,实现也很简单。当下还是有一些局限的:
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浏览器在内,都有不错的效果。
对于方形元素而言,就会出现问题,因为其四角边缘因为高斯模糊而变弯了,于是使用feColorMatrix滤镜alpha通道增强的时候,四边的直角会变成圆角,类似这样:
感觉元素一下子浮肿了。
如果元素原本就是个正圆,则没有这个问题,融合效果最好,因为正圆的高斯模糊它是均匀的。
您可以狠狠地点击这里:带有融合粘滞效果的分享小交互demo
点击分享,就会出现常见社交分享按钮,然后相互间粘滞,同时分享按钮还会抖三抖,效果参见下面Gif:
实现步骤如下:
此时粘滞效果就有了!
为了效果更佳灵动,我们还可以给分享按钮加一个小动画,我们可以从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浏览器都融合的不错,如下截图:
但是在Safari浏览器下:
一副错位打kiss即视感-。
因此,还是需要通过JS手段hack掉Safari浏览器。
原文来自:鑫空间鑫生活
声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com
涉农贷款地址识别,支持对私和对公两种方式。输入地址的行政区划越完整,识别准确度越高。
根据给定的手机号、姓名、身份证、人像图片核验是否一致
通过企业关键词查询企业涉讼详情,如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。
IP反查域名是通过IP查询相关联的域名信息的功能,它提供IP地址历史上绑定过的域名信息。
结合权威身份认证的精准人脸风险查询服务,提升人脸应用及身份认证生态的安全性。人脸风险情报库,覆盖范围广、准确性高,数据权威可靠。