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

This article mainly explains "how to create 3D shuttle effect with CSS". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to create 3D shuttle effect with CSS".

I habitually log on to Apex at home on weekends, ready to play a few games. In the process of landing the accelerator, it was found that the accelerator had expired.

I have been using the Tencent online game accelerator, but click the recharge button to remind me that the client has been upgraded recently and does not support recharging for the time being (this operation shocked me ~). Can only turn around to download NetEase UU accelerator.

Out of sensitivity to CSS, I made a blind guess that the one implemented in CSS should at least be Canvas. Open the console and be a little disappointed that it is a .mp4 file:

And look at the Network panel, this .mp4 file actually needs 3.5m?

Emm, I don't want to play games for a moment. Can't CSS handle such a background picture?

Using CSS 3D to realize interstellar 3D shuttle effect

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

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

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:

Thank you for your reading, the above is the content of "how to create 3D shuttle effect with CSS". After the study of this article, I believe you have a deeper understanding of how to create 3D shuttle effect with CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.