This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

Hello, everyone, my name is small Dudu, there are three front-end languages: HTML, CSS, JS, CSS is often used for layout, do not look down on this CSS, because a lot of cool special effects are directly presented through CSS, even the girlfriend feel very shocking special effects.

Today, let’s take a look at a very cool special effect: space shuttle, the overall effect can be seen above:

Pre-knowledge:

To complete this special effect, you need to prepare a picture of the starry sky first, and then you need to know some pre-properties. Here is a brief introduction:

animation

Animation: An animation property that can be written coherently or separately (preceded by animation-), as in:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Copy the code

Name: The name of the keyframe bound to the selector
Duration: Specifies how many seconds or milliseconds the animation takes to complete
Timing-function: Sets how the animation will complete a cycle
Delay: Sets the delay interval before animation starts.
Rotund-count: Defines the number of times an animation is played.
Direction: Specifies whether the animation should take turns playing backwards.
Fill-mode: Specifies the style to apply to the element when the animation does not play (when the animation is complete, or when the animation has a delay before it starts playing).
Play-state: Specifies whether the animation is running or paused.

In the command, you need to call @keyframes to define the name. The value can be 0% to 100%

transform

Transform: Used for 2D or 3D transformations of elements. This property allows you to rotate, scale, move, tilt, etc.

transform-style: Enables nested elements to be rendered in 2D space or 3D space, wherepreserve-3dAs the 3 d,flatIs 2D and must be present from the elementtransformProperties are valid
translateZ(z): Defines 3d graphics coordinates, z-axis values
roate(90deg): Defines the rotation of a 2D graph in degrees, such as 90 degrees
roateX(90deg): 3D rotation of the X-axis, the parameter is a degree, such as 90 degrees
roateY(90deg): 3D rotation of the axis, the parameter is a degree, such as 90 degrees rotation

filter

Filter: The filter property, which makes things blur

hue-rotate(deg): Apply hue rotation to the image. Give a certain spin character a ring Angle

perspective

perspective: How many pixels of 3D elements are defined from the perspective property of the view. This property allows you to change how 3D elements are viewed in perspective.
perspective-origin: Defines the X and Y axes on which 3D elements are based.

Perspective and perspective-origin need to be used together. The introduction is a bit confusing, but we will see the effect of this attribute directly later

CSS xyz axis

I found an example on the Internet, which well illustrates the X, Y and Z axes: CSS3D cube. Students with poor sense of direction can take a look

For computers:

X-axis: up and down, + for up, – for down
Y-axis: left and right, + represents right, – represents left
Z-axis: Near and far, + represents far, – represents near

The starry sky background

Here we set the background to black and add overflow: Hidden; To prevent scrollbars, then place an image on the page by positioning it like this:

The starry sky corridor

We imagine that the shuttle pattern is a panorama, so it should be divided into four directions: up, down, left and right, so how do we make the picture, from the outside in, gradually smaller?

Let’s make the screen 3D, which istransform-style: preserve-3d;
Then throughtranslateZ(500px)To set the Z-axis, which is the distance into the computer screen, pointing 500px into the plane
throughrotateY(90deg)Rotate 90 degrees in the Y axis

Transform: rotateY(90deg) translateZ(500px);

You will find that the image is gone, so you need the perspective property to give it a perspective effect, but note that it needs to be inside the outer parent element. Like this,

    .content{// the outermost layerperspective: 4px;
        perspective-origin: 50% 50%;
        div{
            transform-style: preserve-3d;
            p{// imagebackground: url('./pic.png');
                 background-size: cover;
                 transform: rotateY(90deg) translateZ(500px); }}}Copy the code

Here’s what you get:

Similarly, we are creating 3 images and setting up, down and left directions respectively, such as (there is a small problem here, I will talk about it later) :

move

Just set the value of z-axis, because it is related to the near and far, not the XY axis. Take a look at the CSS coordinate axis mentioned above, z-axis + stands for far – stands for near, so the effect should be from near to far, that is, first – then positive. Also, the animation can be made longer:

Such as:

div{
  animation: move 12s infinite linear;
  animation-fill-mode: forwards;
}

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

However, we will find that there will be a hole when moving, which is similar to the situation of making a wheel image, actually there are two images, but the delay time is slightly different. Secondly, we can set a hole in the middle of the image, let it be at a further distance, so that this small problem is solved

div{// Set the second &:nth-child(2) {animation: move 12s infinite linear;
        animation-delay: -6s;
        p{
          animation-delay: -6s; }} // Add an additional figure to fill the boxp{&:nth-of-type(5) {transform: rotateX(180deg) translateZ(1000px); }}}Copy the code

Add color and illusion effects

Add the color filter: hue-rotate(0); To filter: hue – rotate (360 deg); It has the same effect as the previous mobile phone charging

So what are the phantom effects?

Opacity, in other words, can be easily solved using opacity

Such as:

@keyframes show {
  0%{
    opacity: 0;
  }
  25%.65%{
    opacity: 1;
  }
  100%{
    opacity: 0; }}@keyframes hueRotate {
  0% {
    filter: hue-rotate(0);
  }
  100% {
    filter: hue-rotate(360deg); }}Copy the code

End result:

Detailed code

index.html

    import React from 'react';
    import './index.less'

    const Index:React.FC<any> = () = > {


      return (
        <div className="Index">
          <div className="content">
            <div>
                <p></p>
                <p></p>   
                <p></p>
                <p></p> 
                <p></p>    
            </div>
            <div>
                <p></p>
                <p></p>   
                <p></p>
                <p></p>   
                <p></p>    
            </div>
          </div>
        </div>
      );
    }

    export default Index;
Copy the code

index.less

    .Index {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      background: # 000;
      text-align: center;
      &::before{
        content: ' ';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
      }
      .content{
        display: inline-block;
        // vertical-align: middle;
        perspective: 4px;
        perspective-origin: 50% 50%;
        position: relative;
        animation: hueRotate 21s infinite linear;
        div{
          position: absolute;
          width: 1000px;
          height: 1000px;
          left: -500px;
          top: -500px;
          transform-style: preserve-3d;
          animation: move 12s infinite linear;
          animation-fill-mode: forwards;
          &:nth-child(2) {animation: move 12s infinite linear;
            animation-delay: -6s;
            p{
              animation-delay: -6s; }}p{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('./pic.png');
            background-size: cover;
            opacity: 1;
            animation: show 12s infinite linear;
            animation-delay: 0;
            &:nth-of-type(1) {transform: rotateY(90deg) translateZ(500px);
            }
            &:nth-of-type(2) {transform: rotateY(-90deg) translateZ(500px);
            }
            &:nth-of-type(3) {transform: rotateX(90deg) translateZ(500px);
            }
            &:nth-of-type(4) {transform: rotateX(-90deg) translateZ(500px);
            }
            &:nth-of-type(5) {transform: rotateX(180deg) translateZ(1000px);
            }
          }
        }
      }
    }



    @keyframes move {
      0%{
        transform: translateZ(-500px);
      }
      100%{
        transform: translateZ(500px); }}@keyframes show {
      0%{
        opacity: 0;
      }
      25%.65%{
        opacity: 1;
      }
      100%{
        opacity: 0; }}@keyframes hueRotate {
      0% {
        filter: hue-rotate(0);
      }
      100% {
        filter: hue-rotate(360deg); }}Copy the code

End

I have to say that CSS is really amazing. The effect is as real as possible. If you like, click like 👍🏻 and support it.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Girlfriend favorite CSS effect: Space shuttle

Pre-knowledge:

animation

transform

filter

perspective

CSS xyz axis

The starry sky background

The starry sky corridor

move

Add color and illusion effects

Detailed code

End

Girlfriend favorite CSS effect: Space shuttle

Pre-knowledge:

animation

transform

filter

perspective

CSS xyz axis

The starry sky background

The starry sky corridor

move

Add color and illusion effects

Detailed code

End

Related Posts

The new Vue3 and vue2 attributes trigger the update comparison

Why our coding boot camp still teaches two programming languages at once

Introduce the FS file system module provided by Node.js