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

This article is about how to use CSS to create a cool sphere animation effect. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Use Jade and SCSS to generate a circle

The first step in creating a circle is to generate all the particles that make up the circle. With Jade, we don't have to write 200 div one by one.

The following code creates a container. Mommy and 200 div:

.mommy

-for (var x = 0; x < 200; xx +)

Div

Add a little bit of CSS to confirm that 200 div have been generated:

.mommy {

Border:1px solid black

}

Div {

Width: 4px

Height: 4px

Background:red

}

As you can see below, we have generated a red square with a high 800px, which is made up of 200 div.

Next, we will position the 200 div in different locations to form a circle, and realize it through SCSS.

In the CSS above, you need to add a few more settings, set the absolute positioning for all div, and move them left and up the distance of the 2px, so that the center point of the div coincides with the zero zero coordinate of the container. Then, we set the container to a fixed width and height size.

.mommy {

Border:1px solid black

Width: 400px

Height: 400px

Position: relative

}

Div {

Width: 4px

Height: 4px

Background:red

Position: absolute

Top:-2px

Left:-2px

}

With SCSS, we can set a different location for each div in the for loop so that we don't have to manually set it one by one. First create a variable whose value is equal to the number of div, so that if you want to use the quantity value of div later, you can refer to this variable directly. If you need to change to 400 div one day, you just need to change the value of the variable in CSS.

$amount: 200

@ for $I from 1 through $amount {

/ / Code in the loop

}

Now we can change the coordinates of each div in the loop, which requires a little bit of math.

The following function is the formula for calculating the coordinate points that generate the circle:

X = cos ((index/amount) * (PI*2)) * radius + radius

Y = sin ((index/amount) * (PI*2)) * radius + radius

The above formula represented by SCSS is:

$x: cos (($i/$amount) * 360deg) * 200px + 200

$y: sin (($i/$amount) * 360deg) * 200px + 200

Then we apply the point coordinates calculated by the formula to each div:

Div:nth-child (# {$I}) {

Transform: translate3d ($x, $yje 0px)

}

This is the result of the first step, not very beautiful, but, well, you created a circle from scratch!

two。 Turn a circle into a sphere

Now we have a circle generated with SCSS, but what we need is a sphere. The circle is a two-dimensional figure, while the sphere is a three-dimensional figure. Two-dimensional geometry has only two axes: the X axis and the Y axis, while for 3D, there is another axis: the Z axis. This means that we also have to calculate the location coordinates of each div on the Z axis. Fortunately, there are already mature formulas to help us locate each element on the sphere. I will not introduce the principle of the formula in detail (which belongs to the category of mathematics). We just need to use it:

θ: (index / amount) * 120

δ: (index / amount) * PI

X: radius * cos (δ) * cos (θ)

Y: radius * cos (δ) * sin (θ)

Z: radius * sin (δ)

Now that we have the above function, which fully meets our needs, we insert it into the loop.

@ for $I from 1 through $amount {

$theta: ($I / $amount) * 120

Delta: ($I / $amount) * pi ()

$x: 200px * cos ($delta) * cos ($theta) + 200; / / + 200 to center our sphere in our 3D world

$y: 200px * cos ($delta) * sin ($theta) + 200; / + 200 to center our sphere in our 3D world

$z: 200px * sin ($delta)

Div:nth-child (# {$I}) {

Transform: translate3d ($x, $yjinjingz)

}

}

Here is the generated sphere effect, as you can see, all the div have a new position, but what we see still seems to be flat, not 3D.

There is an attribute called perspective in CSS, which allows us to set a specific perspective value for any element. In our example, we want to set the 3D effect in the container .mommy. You also need to set a transform-style: preserve-3d; so that all the div are in the stereo coordinate system.

Now we can see that all div sizes are different. The farther the div is from the screen, the smaller it will be, which means they are already in the stereo coordinate system!

3. Rotating sphere

All the div are in place, and we are about to see the final results. We set up an animation with only one Keyframe:

.mommy {

[...]

Animation: rotation 10s linear infinite

}

@ keyframes rotation {

To {

Transform:rotateY (360deg)

}

}

You may have noticed that some div will disappear when they are at 90 °to the screen instead of the front screen. To prevent this from happening, we need to give each div a rotation in the opposite direction so that its front is always facing the screen.

We are going to apply a rotation in the opposite direction to the div, but since we have applied a transformation, we will use the pseudo element, which will become a small red square. In this way, the div itself only needs to provide positioning and set a transform-style property to keep the div in the 3D environment.

Div {

[...]

Transform-style: preserve-3d

&: before {

Content: ""

Display: block

Width: 4px

Height:4px

Background:red

Animation: rotation 10s infinite linear reverse

}

}

Thank you for reading! This is the end of this article on "how to use CSS to create a cool sphere animation effect". 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, you can share it 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.