Use css to create interesting text swing animation effects

In the previous article "Super practical! In "Using CSS3 to overlay and display two images together", we shared two special effects that use CSS3 to overlay and display two images together. This time we will introduce to you how to use CSS to create text swing animation effects. If you are interested, you can learn about it~

Text is the most common component of web pages. Adding animation effects to text can make Web pages are more attractive. Today I will share with you a CSS title text swing animation effect. Come and take a look.

Let’s take a look at the renderings first:

Let’s study how to achieve this effect:

First create the HTML part, Define an h1 title containing text

<h1 id="Hello-nbsp-World-nbsp">Hello World !</h1>

Then start defining css styles for modification:

Background color

body {
  background: black;
}

h1 title text style, use the text-stroke attribute to add a white stroke

h1 {
text-align: center;
margin: 200px auto;
font-size: 4.5rem;
font-family: arial;
font-weight: 900;
color: transparent;
overflow: hidden;
-webkit-text-stroke: 4px white;
}

h1 title text style, Use the background series properties and linear-gradient() to add text background

background: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(-45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(90deg, crimson 30%, transparent 30%, transparent 70%, crimson 70%)red;
background-size: 20px 20px, 20px 20px, 1px 1px;
background-position: 0 0, 0 0, 0 0;
-webkit-background-clip: text;

h1 title text style, use the filter property to add border shadow

filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 2px crimson);

The next step is to add animation effects to make the text swing and the text background also move (to achieve a displacement effect):

Bind animation animation to the h1 tag. Set up two animations bg-shifth and swing: bg-shifth animation controls the text background, and swing animation controls the text swing

animation: bg-shift 1s ease-in-out infinite alternate-reverse, swing 2s ease-in-out infinite;

Use two @keyframes rules to set the action of each frame for the two animations.

@keyframes bg-shift {
  from {
    background-position: 0 50px;
  }
}

@keyframes swing {
  0% {
    transform-origin: top;
    transform: perspective(550px)rotatex(55deg);
  }

  50% {
    transform: perspective(550px)rotatex(-55deg);
  }

  100% {
    transform-origin: top;
    transform: perspective(550px)rotatex(55deg);

  }
}

Finally, the final effect has a highlight effect when swinging. Let’s implement it:

h1::before {
  content: "Hello World !";
  position: absolute;
  background: linear-gradient(transparent 30%, white, transparent 70%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px red;
}

Add an animation effect bg-shift2 to it, so that it changes position as the text swings:

animation: bg-shift2 2s ease-in-out infinite alternate-reverse;

Use the @keyframes rule to set the action for each frame of the animation.

@keyframes bg-shift2 {
  0% {
    background-position: 0 50px;
  }

  50% {

    background-position: 0 -50px;

  }

  100% {
    background-position: 0 50px;
  }
}

The complete code is given below:

<meta charset="utf-8">
<style>
    body {
        background: black;
        /* overflow: hidden; */
    }

    h1 {
        text-align: center;
        margin: 200px auto;
        font-size: 4.5rem;
        font-family: arial;
        font-weight: 900;
        color: transparent;
        overflow: hidden;
        -webkit-text-stroke: 4px white;
        background: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(-45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(90deg, crimson 30%, transparent 30%, transparent 70%, crimson 70%)red;
        background-size: 20px 20px, 20px 20px, 1px 1px;
        background-position: 0 0, 0 0, 0 0;
        -webkit-background-clip: text;
        filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 2px crimson);
        animation: bg-shift 1s ease-in-out infinite alternate-reverse, swing 2s ease-in-out infinite;
    }

    @keyframes bg-shift {
        from {
            background-position: 0 50px;
        }
    }

    @keyframes swing {
        0% {
            transform-origin: top;
            transform: perspective(550px)rotatex(55deg);
        }

        50% {
            transform: perspective(550px)rotatex(-55deg);
        }

        100% {
            transform-origin: top;
            transform: perspective(550px)rotatex(55deg);

        }
    }

    h1::before {
        content: "Hello World !";
        position: absolute;
        background: linear-gradient(transparent 30%, white, transparent 70%);
        -webkit-background-clip: text;
        -webkit-text-stroke: 2px red;
        animation: bg-shift2 2s ease-in-out infinite alternate-reverse;
    }

    @keyframes bg-shift2 {
        0% {
            background-position: 0 50px;
        }

        50% {

            background-position: 0 -50px;

        }

        100% {
            background-position: 0 50px;
        }
    }
</style>


<h1 id="Hello-nbsp-World-nbsp">Hello World !</h1>

The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "css video" Tutorial》!

The above is the detailed content of Use css to create interesting text swing animation effects. For more information, please follow other related articles on the PHP Chinese website!