主页»HTML/CSS»CSS完结两个球相交的粘粘作用

CSS完结两个球相交的粘粘作用

来历:果冻 发布时刻:2019-05-18 阅览次数:

  这是一个朴实运用CSS所做出来的作用,这个作用说穿了便是一个图画处理的原理,做法跟Photoshop里头的简直如出一辙,仅仅一个用图层和色版来制造,一个则是用CSS(把div当成图层考虑就好了)。

 从PhotoShop开端

  一开端咱们来玩Photoshop,会比直接写CSS来得简略了解(没有Photoshop的人也不要紧,看完阐明也就懂了),首要咱们新增两个图层,一个里头放上赤色的小球,别的一个里头放上黑色的大球。

  接着咱们运用高斯含糊的滤镜,分别把小红球和大黑球含糊。

  再来咱们新增一个“亮度与比照”的调整图层,勾选运用旧版,然后把比照数值往上拉,你就会看到奇特的现象。

  拉到边际不再含糊之后,你就能够用鼠标尝试着把红球移动,就会发现红球与黑球接壤的当地变成粘粘的作用心,这便是咱们要做的作用!

  就这样,你现已知道怎么用Photoshop来制造,同理,CSS也是用相同的办法,仅仅把图层换成了div罢了,就这么简略。

 CSS作用

  首要我在HTML里头,放上一个class为redball的div当作红球,class为blackball的是黑球,这便是刚刚在PhotoShop里头的两个图层,接着在最外围放上一个class为effect的div,这便是咱们的调整图层,完结后HTML代码的长相应该是这样:

<div class="effect">
  <div class="blackball"></div>
  <div class="redball"></div>
</div>

  只要对blackball和redball参加含糊的滤镜,对effect参加比照的滤镜,就能够到达Photoshop里边的特效,而含糊的滤镜有必要运用filter:blur(数值),比照则运用filter:contrast(数值)。

  CSS的长相会长这样:

.effect{
  width:100%;
  height:100%;
  padding-top:50px;
  filter:contrast(10);
  background:#fff;
}
.blackball{
  width:100px;
  height:100px;
  background:black;
  padding:10px;
  border-radius:50%;
  margin:0 auto;
  z-index:1;
  filter:blur(5px);
}
.redball{
  width:60px;
  height:60px;
  background:#f00;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:70px;
  left:50px;
  z-index:2;
  filter:blur(5px) ;
  animation:rball 6s infinite;
}

  疏忽CSS里头那些定位数值,里头blur的数值设为5px,contrast的数值设为10,就能够看到红求黑球粘在一起了,至于该怎样让他们动起来呢?就要运用CSS3的animation,animation的程序如下:

@keyframes rball{
  0%,100%{
    left:35px;
    width:60px;
    height:60px;
  }
  4%,54%{
    width:60px;
    height:60px;
  }
  10%,60%{
    width:50px;
    height:70px;
  }
  20%,70%{
    width:60px;
    height:60px;
  }
  34%,90%{
    width:70px;
    height:50px;
  }
  41%{
    width:60px;
    height:60px;
  }
  50%{
    left:calc(100% - 95px);
    width:60px;
    height:60px;
  }
}

  这儿的keyframe写了许多,因为要让红球进入黑球时,水平方向会被紧缩一下,然后再脱离黑球的时分,水平方向会被拉长,如此一来才会更像有粘性的感觉,为了测验这个作用,可真是煞费我的苦心呀!(不过这儿有个要留意的当地,因为方位上会主动去核算,所以要测验的话,最外层的effect宽度记住设为320px)

  完结红球之后,要让两颗蓝色球合在一起再分隔,也是相同的原理,下方列出两颗蓝色球的CSS,比较需求留意的当地是我让蓝色球合体之后会变大一些,分隔的时分也会拉长。

.blueball1{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:0;
  z-index:2;
  filter:blur(8px) ;
  animation:bball1 6s infinite;
}
.blueball2{
  width:80px;
  height:80px;
  background:#00f;
  padding:10px;
  border-radius:50%;
  position:absolute;
  top:230px;
  left:240px;
  z-index:2;
  filter:blur(8px) ;
  animation:bball2 6s infinite;
}
@keyframes bball1{
  0%,100%{
    left:0;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:75px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    top:215px;
    left:110px;
    width:110px;
    height:110px;
  }
}
@keyframes bball2{
  0%,100%{
    left:240px;
    top:230px;
    width:80px;
    height:80px;
  }
  20%{
    top:230px;
    width:80px;
    height:80px;
  }
  85%{
    top:230px;
    left:165px;
    width:90px;
    height:70px;
  }
  90%{
    top:228px;
    width:75px;
    height:85px;
  }
  50%{
    left:110px;
    top:215px;
    width:110px;
    height:110px;
  }
}

  就这样,单纯运用CSS就完结了一个粘粘的作用,坦白说我也不太清楚这个作用能够用在哪里,不过假如用在水底国际或一些loading的特效,应该是适当不赖的!

QQ群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
CSS
网友谈论(共0条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共0条谈论
登录会员中心