Vue<黏黏球效果>

效果图：

ball.gif

如果想单纯的实现这种效果，其实使用CSS中的对比度和模糊度就能实现。

 filter: contrast(20); //对比度
 filter: blur(10px); //模糊度

具体怎么实现请参考https://www.jb51.net/css/672819.html，这个上面解释的很清楚，但是这种方法只适合于实现效果，因为当你想做一个菜单栏，你会发现根本看不见文字。

！！要注意下面的代码就能实现咯！😜

这篇文章主要运用了滤镜，通过CSS中直接引用 filter: url("#shadowed-goo");就可以直接实现效果了，svg内的东西我也不太清楚，直接拿来用就行了！！😁

代码如下：

<template>
  <div class="overall">
    <div class="box">
      <div class="ball" @click="ball=!ball">
          <div class="dot" v-for="(i,index) in 3" :key="index" :style="ball?`transform: rotate(${120*index}deg) translateX(90px)`:`transform: rotate(${120*index}deg)`">+</div>
      </div>
    </div>
    <svg style="width: 0; height: 0;">
    <defs>
    <filter id="shadowed-goo">
        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
        <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
        <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
        <feOffset in="shadow" dx="1" dy="1" result="shadow" />
        <feBlend in2="shadow" in="goo" result="goo" />
        <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
    <filter id="goo">
        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
        <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
    </defs>
</svg>
  </div>
</template>

<script>
export default {
    data(){
        return{
            ball:false
        }
    }
};
</script>

<style lang="scss" scoped>
.box {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  width: 360px;
  height: 360px;
 filter: url("#shadowed-goo");
 display: flex;
 justify-content: center;
 align-items: center;
//  filter: contrast(20); //对比度
  .ball {
    color: white;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: black;
    // filter: blur(10px); //模糊度
    position: relative;
    cursor: pointer;
    .dot{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: black;
        position: absolute;
        top: calc(50% - 35px);
        left: calc(50% - 35px);
        transition: 0.5s;
        line-height: 70px;
        z-index: -1;
    }
  }
}
</style>