【CSS+SVG】滑动放大表情符号效果

大家好，我是 Steven。

这期我们会做一个滑动放大表情符号的效果，随着游标移过表情符号，表情符号会放大。除此之外，背景的灰色也会有个不规则的顺滑线条放大，这个部分我们会用 SVG 去制作的。

这个教程的视频版本在 www.bilibili.com/video/BV1DK… ，欢迎三连关注！

HTML 的部分

打开 CodePen 编辑器，在 HTML 里面加入 <svg> 标签。然后加入一个长方形，宽度 300，高度 50，x 是 0，y 是 50 向下移一点，rx 设定为 25，这样就是一个圆角的长方形，而颜色设定为浅灰色 #e3e3e3。

再加入一个圆形，先设定一下位置，cx 设定为 40，cy 设定为 75，半径设定为 40，颜色同样设定为浅灰色，然后给它一个 id 命名 pop。

我们先处理一下，如何将这个位置改变为顺滑的过渡，我都不知道怎样形容，词穷了，大家明白就好。

加入 <filter> 标签，id 设定为 mix，然后将刚才建立的 <rect> 以及 <circle> 用一个 <g> 标签，即是 group 组合起来。然后套用 filter=url(#mix) 将 mix 这个滤镜套用进去，在 <filter> 里面加入 <feGaussianBlur> 标签，in 设定为 SourceGraphic，result 设定为 blur，然后 stdDeviation 设定为 5，即是套用高斯模糊度是 5。

再加入 <feColorMatrix> 标签，in="blur"，mode="matrix"，value 填上 1 0 0 0 0、0 1 0 0 0，0 0 1 0 0，这三组是用来设定 RGB 颜色的，RGB 我们不改变，所以保持原来的值。最后一组是 Alpha 透明度，将它设定为 0 0 0 60 -36，这里的意思大概是，先套用高斯模糊，然后再透过颜色矩阵，计算出新的颜色比例，将较浅灰的部份划为透明色，而较深灰的部份划为灰色。

60 -36 这两个值我也是试出来的，大家可以随便调整试试。而关于 <feColorMatrix> 的用法和相关的公式可以参考 MDN 的网页。

现在就做到圆形和长方形融合的效果了，接下来加入表情符号。在 <svg> 的前面加入 <ul> 标签，class 命名为 emojis。然后新增五个 <li> 并且加入表情符号。

CSS 的部分

来到 CSS 的部份，加入 body 选择器，透过 flex 设定上下左右置中。

加入 svg 选择器，将宽度设定为 600px，加入 .emojis 选择器，设定 list-style 为 none 取消原来列表的样式，margin 和 padding 设定为 0，宽度设定为 600px。

然后 position 设定为 absolute，top 和 left 是 50%，transform 设定为 translate(-50%, -50%)，这样才可以把它在 position absolute 的状态下上下左右置中。左右加一点 padding 设定为 20px，box-sizing 设定为 border-box，display 设定为 flex。

再加入 .emojis li 选择器，将 flex 设定为 1，这样里面的五个 <li> 就可以平均分配空间。font-size 设定为 60px，text-align 设定为 center。

然后要在游标移过去的时候放大，加入 .emojis li:hover 选择器，加入 transform: scale(1.6)，再在 li 里面加入 transition: .2s all ease-in-out 加入动画过渡。

JavaScript 的部分

现在就差不多了，在 JavaScript 那里加入一些代码，完成将 <svg> 里面的圆形移动的效果。

加入 document.querySelector('.emojis').addEventListener('mousemove') 监听滑鼠移动的事件，定义一个变数名为 offset，将 e.clientX，即是游标的 X 座标，减去 e.currentTarget.getBoundingClientRect().left 左边的位移，然后除以 2。

然后透过 setAttribute() 套用到 #pop 的 cx 上，再修正一下它的左边和右边可移动的最大距离。由于圆形的半径是 40，所以判断一下，当 offset 小于 40 时，就等于 40，而大于 260 时，就等于 260。

最后，如何在移到过去的时候才出现圆形呢？将 HTML 里面 <circle> 的 r 属性移到 CSS 这边设定。加入 .emojis + svg #pop 选择器，将 r 设定为 20，再加入 .emojis:hover + svg #pop 选择器，将 r 设定为 40。

不要忘记加回一些动画过渡的设定，transition: .2s r ease-in-out。

我们来看看这个案例的完成效果

以上，就是今集要介绍的全部内容。

这个案例的源代码在 codepen.io/stevenlei/p…

你的支持是我的动力，请关注 CodingStartup 起码课，我们一起加油！