Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use pure CSS to achieve the sticky effect of the intersection of two balls. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

This is an effect made purely by CSS, which, to put it bluntly, is an image processing principle, which is almost exactly the same as that in Photoshop, except that one is made of layers and color plates, and the other is made of CSS (just think of div as a layer).

Starting with PhotoShop

At first, it is easier to understand when we play Photoshop than to write CSS directly (it doesn't matter to those who don't have Photoshop, but we'll understand it after reading the instructions). First, we add two layers, one with a red ball and the other with a big black ball.

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

Let's add a "brightness and contrast" adjustment layer, check to use the old version, and then pull up the contrast value, and you will see a magical phenomenon.

Pull to the edge is no longer blurred, you can use the mouse to try to move the red ball, you will find that the red ball and black ball at the junction of the heart into a sticky effect, this is what we have to do!

In this way, you already know how to use Photoshop to make, in the same way, CSS uses the same method, just changing the layer to div, it's as simple as that.

CSS effect

First of all, in HTML, I put a div with class as redball as a red ball, and class as blackball as a black ball. These are the two layers just in PhotoShop, and then put a div with class as effect in the outermost. This is our adjustment layer. After completion, the HTML code should look like this:

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, while the blur filter must use filter:blur (numerical value), and the comparison must use filter:contrast (numerical value).

The president of CSS looks 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 value of blur to 5px and set the value to 10, and you can see that the red and black balls stick together, but how to get them moving? The procedure to use CSS3's animation,animation is as follows:

@ keyframes rball {

0% 100% {

Left:35px

Width:60px

Height:60px

}

4%, 54% {

Width:60px

Height:60px

}

10% 50% 60% {

Width:50px

Height:70px

}

20% 770% {

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 here wrote a lot, because to let the red ball into the black ball, the horizontal direction will be compressed, and then leave the black ball, the horizontal direction will be lengthened, so it will be more like a sticky feeling, in order to test this effect, it really takes my pains! (however, there is one thing to note here, because the position will be calculated automatically, so to test, remember to set the outermost effect width to 320px)

After completing the red ball, it is the same principle to make the two blue balls join together and then separate. The CSS of the two blue balls listed below is that I make the blue ball bigger after fitting and elongate when it is 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

}

}

In this way, the simple use of CSS to achieve a sticky effect, frankly I am not quite sure where this effect can be used, but if used in the underwater world or some loading special effects, it should be quite good!

This is the end of this article on "how to use pure CSS to achieve the sticky effect of the intersection of two balls". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.