Teach you step by step how to use CSS to create text to achieve frame-by-frame animation (with code)

In the previous article "Teach you step by step how to use css3 to create cool navigation bar effects (detailed code explanation)", I introduced you how to use css3 to create cool navigation bar effects. The following article will introduce to you how to use CSS to create text to achieve frame-by-frame animation. Let’s take a look at how to do it.

Text frame-by-frame animation is the most common component in web pages. Add frame-by-frame animation effects to text. Let me share with you the renderings

After seeing the effect, let’s study how to achieve it

Method steps

HTML part

1. Create html to define a div title containing text and use the class attribute to style it.

Html editing code example

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

Code effect

##After the Html editing is written, use css styles to modify it.

CSS part

1. Add background color to the web page

body{
  background:#333;
}

2.

cellTitle text style, use ## The #dashed attribute adds the style and color of the element border, and uses the position: absolute attribute to place absolute positioning in the middle. Code example

.cell{
    width: 1em;  
    height: 1em;
    border:1px dashed rgba(255,255,255,0.1);
    font-size:120px;
    font-family:Frijole;
    overflow: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin:-0.5em 0 0  -0.5em;
    opacity:0;
    animation:go 6s;
        transform-origin:left bottom;｝

3,

num

The title text style uses the animation attributesteps()frame-by-frame animation, and Use the text-shadow attribute to add text shadow and color, and use the position: absolute attribute to place absolute positioning in the middle. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.num{ position:absolute; width: 1em; color:#E53F39; line-height: 1em; text-align: center; text-shadow:1px 1px 2px rgba(255,255,255,.3); animation:run 6s steps(6); }</pre><div class="contentsignin">Copy after login</div></div>Next, we add animation effects to make the text dynamic to achieve frame-by-frame animation effects.

Bind animation animation to num tag.

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

@keyframes run{
    0%{top:0;}
    100%{top:-6em;}
}
@keyframes go{
  0%   {opacity:1;}
  84%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}

Final effect

The complete code is given below

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

【End】

Recommended learning :

CSS video tutorial

The above is the detailed content of Teach you step by step how to use CSS to create text to achieve frame-by-frame animation (with code). For more information, please follow other related articles on the PHP Chinese website!