关于技术您现在的位置是:首页 > 关于技术
SVG简单实现融滞效果
2019-01-22 14:55:39 【CSS, SVG】 212 人已围观 0 条评论
简介
生活中我们常见,两滴水在靠近时会相互粘连,慢慢地融合到一起,这融合的过程就产生了融滞效果。 那么放到Web页面 […]
生活中我们常见,两滴水在靠近时会相互粘连,慢慢地融合到一起,这融合的过程就产生了融滞效果。
那么放到Web页面上,我们该如何实现这种效果呢?像往常一样,先让我们看一下效果图吧。
可以看到,红色小球的边缘有慢慢融合的效果,接下来我们就用代码来实现它。
这里主要运用SVG的过滤器来呈现这种特殊效果。主要用到模糊效果 feGaussianBlur 以及图像处理 feColorMatrix 过滤器。
首先我们看页面结构,做两个红色小球出来,然后svg该怎么去写,html代码如下:
<div class="demo"> <svg width="0" height="0"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" 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 20 -9" result="goo" /> </filter> </defs> </svg> <h4>拖动右侧球靠近左侧球</h4> <div class="target"> <i id="ball1" class="ball"></i> <i id="ball2" class="ball"></i> </div> </div>
简单的css给页面做一下样式,具体代码如下,核心代码为:
.target { filter: url('#goo'); }
为目标元素加上我们设计的滤镜效果。
.demo{ margin: 100px; } svg{ position: absolute; } .target{ filter: url('#goo'); } .ball{ width: 150px; height: 150px; border-radius: 50%; background-color: #ff0000; position: absolute; } .ball + .ball{ margin-left: 200px; }
接下来,我们简单的用js来实现一下右侧小球的拖拽功能,看代码吧:
var ball2 = document.getElementById('ball2'); ball2.onmousedown = function(e){ var e = e || event; var disX = e.clientX - ball2.offsetLeft; var disY = e.clientY - ball2.offsetTop; document.onmousemove = function(e){ var e = e || event; // 减200是因为样式中有一个margin-left var l = e.clientX - disX - 200; var t = e.clientY - disY; ball2.style.left = l + 'px'; ball2.style.top = t + 'px'; } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } }
完成拖拽功能后,我们就可以拖着右侧的小球慢慢靠近左侧小球,在靠近并接触到左侧小球的时候就会产生融滞效果啦。想看最终效果,来猛戳这里。
相信大家都有各自的一套方法实现这种效果,我们,加油!
Over~拜
上一篇: 模拟360导航首页,文字与背景颜色互换滚动效果
下一篇: 用 Canvas 绘制一个时钟