CSS to achieve the sticky effect of two balls intersecting sample code

This is an effect created purely using CSS. To put it bluntly, this effect is based on the principle of image processing. The method is almost exactly the same as that in Photoshop, except that one is created using layers and color palettes, while the other is created using CSS (just think of divs as layers).

Getting Started with PhotoShop

Let's start by playing with Photoshop, which will be easier to understand than writing CSS directly (it doesn't matter if you don't have Photoshop, you will understand it after reading the instructions). First, we add two new layers, put a small red ball in one and a big black ball in the other.

Next, we use the Gaussian blur filter to blur the small red ball and the big black ball respectively.

Next, we add a new "Brightness and Contrast" adjustment layer, check Use old version, and then increase the contrast value, and you will see a magical phenomenon.

After pulling until the edge is no longer blurry, you can try to move the red ball with the mouse, and you will find that the junction of the red ball and the black ball becomes a sticky effect center. This is the effect we want to create!

Just like that, you already know how to use Photoshop to make it. Similarly, CSS uses the same method, except that the layer is replaced with div. It’s that simple.

CSS Effects

First, I put a div with class redball as the red ball and class blackball as the black ball in the HTML. These are the two layers in Photoshop. Then I put a div with class effect on the outermost layer. This is our adjustment layer. When you are done, the HTML code should look like this:

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

As long as you add a blur filter to blackball and redball, and a contrast filter to effect, you can achieve the special effects in Photoshop. The blur filter must use filter:blur (numeric value), and the contrast must use filter:contrast (numeric value).

The CSS will look like this:

.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;
}

Ignore the positioning values ​​in CSS, set the blur value to 5px and the contrast value to 10, and you can see that the red and black balls stick together. But how do we make them move? You need to use CSS3 animation. The animation procedure is as follows:

@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;
  }
}

There are a lot of keyframes written here, because when the red ball enters the black ball, it will be compressed horizontally, and then when it leaves the black ball, it will be stretched horizontally. This way, it will feel more sticky. I spent a lot of effort to test this effect! (However, there is one thing to note here. Since the position will be automatically calculated, if you want to test it, remember to set the width of the outermost effect to 320px)

After completing the red ball, you need to make the two blue balls merge together and then separate. The same principle applies. The CSS of the two blue balls is listed below. What you need to pay attention to is that I made the blue balls larger after merging, and they will also be elongated when separated.

.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;
  }
}

Just like that, a sticky effect is achieved simply by using CSS. To be honest, I’m not quite sure where this effect can be used, but if it is used in the underwater world or some loading special effects, it should be pretty good!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.