3D shuttle effect? Easy to do with CSS

background

Weekend at home regularly logged in Apex, ready to play a few games. While landing on the accelerator, it was discovered that the accelerator had expired.

I have been using the Tencent online game accelerator, but click the recharge button, indicating that the client recently upgraded, temporarily does not support recharge (this operation shocked me ~). Can only turn to download netease UU accelerator.

When you open the homepage of UU accelerator, you will see a picture like this:

Instantly, I was attracted by the background image.

Out of sensitivity to CSS, BLIND guess a wave of this CSS implementation, at least should be Canvas. When I opened the console, I was slightly disappointed to find a.mp4 file:

Look at the Network panel, this.mp4 file is 3.5 MB?

Emm, suddenly don’t want to play video games. Can’t CSS handle a background like this?

Use CSS 3D to achieve interstellar 3D shuttle effect

This technique, I’m ideas CSS 3 d animation | just use CSS can produce many amazing animation? It has also been mentioned, if you are interested, you can take a look.

Suppose we have a graph like this:

I’ll keep this one for later. Before using this graph, we will draw a graph like this:

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
</div>
Copy the code

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);
}
Copy the code

There are five child elements, but if you look at the CSS code carefully, four of them are rotateX/Y(90deg/ -90DEg), which is rotated 90 degrees around the X or Y axis, so it is visually perpendicular to the screen, so it is visually impossible. Only one plane can be seen. Item-middle.

I set 5 sub-items with different background colors and the result is as follows:

Now, it seems unremarkable, and it is.

However, the magic comes when we give the parent element.g-container a tiny perspective, such as 4px, and see what happens:

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

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

As the perspective takes effect, the original flat effect becomes 3D. Next, we used the prepared sky map above, replaced the background colors with the same image, and something amazing happened:

Since the perspective is very low and the transform: translateZ(50px) of each item is very large, the image is greatly stretched visually. But the whole thing fills the whole screen.

Next, we just need to animate the perspective and add an animation to the parent element by controlling the translateZ() of the parent element:

.g-container{
  position: relative;
  perspective: 4px;
  perspective-origin: 50% 50%;
}

.g-group{
  position: absolute; / /... Some positioning height and width codetransform-style: preserve-3d;
  + animation: move 8s infinite linear;
}

@keyframes move {
  0%{
    transform: translateZ(-50px) rotate(0deg);
  }
  100%{
    transform: translateZ(50px) rotate(0deg); }}Copy the code

Look, the magical and wonderful sky shuttle effect came out. Amazing:

The fly in the ointment is that the animation does not connect indefinitely, and the beginning and end are very problematic.

Of course, this is not difficult for us, we can:

By superimposing two sets of the same effects, one group passes negative than the otheranimation-delayMove ahead so that the two groups of animations link up (one group ends while the other is still moving)
Again through the change of transparency, hidden awayitem-middleA sudden sensation coming your way
Finally, you can filter through the parent elementhue-rotateControl the color change of the picture

We tried to modify the HTML structure as follows:

<div class="g-container">
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div> 
      <div class="item item-middle"></div>    
  </div>
  <! Add a group of animations -->
  <div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>    
  </div>
</div>
Copy the code

The modified core CSS is as follows:

.g-container{
  perspective: 4px;
  position: relative; // hue-rotate Changes the color of an imageanimation: hueRotate 21s infinite linear;
}

.g-group{
  transform-style: preserve-3d;
  animation: move 12sinfinite linear; } // Set negativeanimation-delayLet the second animation move forward.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; // The transparency of the child element changes to reduce the sense of abrupt transition in the animationanimation: 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;
  }
  100%{
    opacity: 0; }}@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg); }}Copy the code

The final complete effect is as follows, the effect of the star shuttle, the entire animation end to end, can go on forever, almost without flaws, very cool:

For the complete code above, you can click here: CSS-inspired – 3D Cosmic time travel effect

In this way, we basically restored the GIF background of the netease UU accelerator home page.

Further, I don’t want to use a single image

Of course, there will be readers here ridicule, you are not here to use a picture resources? Can we do without the sky map? I didn’t bother to look for this one.

Sure, CSS YYDS. Here we try to use box-shadow to replace the actual sky map, again in a div tag, with the help of SASS’s loop function:

<div></div>
Copy the code

@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 : 0 0 0 0 randomColor(a);@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);
}
Copy the code

Here, we have encapsulated a function in SASS that takes advantage of multiple box-shadow properties to generate points of the passed number within the height and width of the passed size.

In this way, we can get a picture like this, which can be used to replace the actual sky map:

Let’s replace the map with the actual sky map, mainly by replacing the.item class and listing only the changes:

// The original CSS uses a star map.item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
  background-size: cover;
  animation: fade 12sinfinite 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);
}
Copy the code

Thus, we achieve the effect of using pure CSS with no additional resources:

CodePen Demo — Pure CSS Galaxy Shuttle 2

By adjusting the animation time, perspective value, and translateZ() distance of each group of elements, different looks and effects can be obtained. Interested readers can try them by themselves based on the DEMO I gave above.

The last

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

3D shuttle effect? Easy to do with CSS

background

Use CSS 3D to achieve interstellar 3D shuttle effect

Further, I don’t want to use a single image

The last

Related Posts

Does the writing order of styles affect rendering performance? There are several ways to locate styles in CSS

Front-end Unit Testing Framework -Jest Getting Started Configuration (Testing TypeScript)

Principle analysis of Flutter soft keyboard