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

This article mainly introduces "how to use css to achieve 3D shuttle effect". In daily operation, I believe many people have doubts about how to use css to achieve 3D shuttle effect. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to use css to achieve 3D shuttle effect". Next, please follow the editor to study!

Using CSS 3D to realize interstellar 3D shuttle effect

With this technique, I'm thinking of CSS 3D animation. How amazing can I make with only CSS? It has also been mentioned, if you are interested, you can take a look at it.

Suppose we have a graph like this:

This picture is kept in reserve. Before using this picture, we will draw a graph like this:

Body {background: # 000;}. G-container {position: relative;}. G-group {position: absolute; width: 100px; height: 100px; left:-50px; top:-50px; transform-style: preserve-3d;}. Item {position: absolute; width: 100%; height: 100%; background: rgba (255,255,255, .5);} .item-right {background: red; transform: rotateY (90deg) translateZ (50px) Item-left {background: green; transform: rotateY (- 90deg) translateZ (50px);} .item-top {background: blue; transform: rotateX (90deg) translateZ (50px);} .item-bottom {background: deeppink; transform: rotateX (- 90deg) translateZ (50px);} .item-middle {background: rgba (255,255,255,0.5); transform: rotateX (180deg) translateZ (50px);}

Set a total of 5 child elements, but take a closer look at the CSS code, 4 of which are set rotateX/Y (90deg/-90deg), that is, around the X axis or Y axis rotated 90 °, visually is a vertical screen of a plane, so intuitive vision we can not see only a plane .item-middle.

I set the 5 sub-item to different background colors, and the results are as follows:

Now it seems to be mediocre, and indeed it is.

However, the time has come to witness a miracle, when we set a tiny perspective for the parent element. g-container, for example, to set a perspective: 4px to see the effect:

.g-container {position: relative;+ perspective: 4px;} / /. The rest of the styles remain unchanged

At this point, the style of painting changes suddenly, and the whole effect becomes like this:

Because perspective takes effect, the original planar effect becomes a 3D effect. Next, we use the star map prepared above, replace the background color above, and all change to the same picture, and something amazing happens:

Because the perspective setting is very low, and the transform: translateZ (50px) setting of each item is relatively large, the picture is visually stretched very much. But the whole is full of the whole screen.

Next, we just need to get the viewing angle moving, add an animation to the parent element, and change it by controlling the parent element's translateZ ():

.g-container {position: relative; perspective: 4px; perspective-origin: 50% 50%;} .g-group {position: absolute; / /. Some positioning codes transform-style: preserve-3d; + animation: move 8s infinite linear;} @ keyframes move {0% {transform: translateZ (- 50px) rotate (0deg);} 100% {transform: translateZ (50px) rotate (0deg);}}

Look, the magical and wonderful effect of star shuttling comes out, Amazing:

The deficiency is that the animation can not be connected indefinitely, and there are great problems at the beginning and the end.

Of course, it doesn't bother us, we can:

By superimposing two groups of the same effect, one group travels ahead of the other through a negative animation-delay to link up the two sets of animation (one group ends and the other group is still in progress)

Then, through the change of transparency, we can hide the sudden feeling of item-middle flying head-on.

Finally, you can control the color change of the picture through the filter hue-rotate of the parent element.

We try to modify the HTML structure as follows:

The modified core CSS is as follows:

.g-container {perspective: 4px; position: relative; / / hue-rotate change animation, you can make the image color change all the time animation: hueRotate 21s infinite linear;}. G-group {transform-style: preserve-3d; animation: move 12s infinite linear;} / / set negative animation-delay, so that the second group of animations can be carried out in advance. G-group:nth-child (2) {animation: move 12s infinite linear; animation-delay:-6s } .item {background: url (https://z3.ax1x.com/2021/08/20/fLwuMd.jpg); background-size: cover; opacity: 1; / / changes in the transparency of sub-elements to reduce the sudden feeling of animation convergence animation: fade 12s infinite linear; animation-delay: 0;} .g-group:nth-child (2) .item {animation-delay:-6s;} @ keyframes move {0 {transform: translateZ (- 500px) rotate (0deg) } 100% {transform: translateZ (500px) rotate (0deg);}} @ keyframes fade {0% {opacity: 0;} 25%, 60% {opacity: 1;} @ keyframes hueRotate {0% {filter: hue-rotate (0);} 100% {filter: hue-rotate (360deg);}

The final complete effect is as follows, the starry sky shuttle effect, the whole animation is connected from beginning to end, can go on indefinitely, almost without flaw, very good:

For the complete code above, you can slam here: CSS inspiration-3D space-time travel effect in the universe.

In this way, we basically restore the dynamic background of the front page of NetEase UU accelerator seen above.

Further, I don't want to use a single picture.

Of course, there are still some readers who complain, don't you also use a picture resource here? Is it all right without that starry map? I don't bother to look for this picture either.

Of course, CSS YYDS. Here we try to use box-shadow to replace the actual star map, which is also implemented in a div tag, with the help of the loop function of SASS:

@ function randomNum ($max, $min: 0, $u: 1) {@ return ($min + random ($max)) * $u;} @ function randomColor () {@ return rgb (randomNum (255), randomNum (255), randomNum (255);} @ function shadowSet ($maxWidth, $maxHeight, $count) {$shadow: 0000 randomColor (); @ for $I from 0 through $count {$x: # {random (10000) / 10000 * $maxWidth} $y: # {random (10000) / 10000 * $maxHeight}; $shadow: $shadow, # {$x} # {$y} 0 # {random (5)} px randomColor (); @ return $shadow;} body {background: # 000;} div {width: 1px; height: 1px; border-radius: 50%; box-shadow: shadowSet (100vw, 100vh, 500);}

Here, we encapsulate a function with SASS and use the feature of multiple box-shadow to generate the number of incoming points within the height and width of the incoming size.

In this way, we can get a picture that can be used to replace the actual star map:

Let's replace the actual star chart with the above diagram, mainly replacing the .item class, listing only the modified parts:

/ / original CSS, using a star chart. Item {position: absolute; width: 100%; height: 100%; background: url (https://z3.ax1x.com/2021/08/20/fLwuMd.jpg); background-size: cover; animation: fade 12s infinite linear;} / / modified CSS code .item {position: absolute; width: 100%; height: 100%; background: # 000; animation: fade 12s infinite linear }. Item::after {content: "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 1px; height: 1px; border-radius: 50%; box-shadow: shadowSet (100vw, 100vh, 500);}

In this way, we have achieved the effect of using pure CSS to achieve the above effect without additional resources:

By adjusting the time of the animation, the value of perspective, and the translateZ () change distance of each group of elements, we can get a variety of different looks and effects.

At this point, the study on "how to use css to achieve 3D shuttle effect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.