• 技术文章 >web前端 >css教程

    一步一步教你使用CSS制作文字实现逐帧动画(附代码)

    奋力向前奋力向前2021-09-01 17:28:57原创189

    之前的文章《手把手教你使用css3制作炫酷的导航栏效果(代码详解)》中,给大家介绍了怎么使用css3制作炫酷的导航栏效果,下面本篇文章给大家介绍怎么使用CSS制作文字实现逐帧动画,我们一起看看怎么做。

    文字实现逐帧动画是网页中最常见的一种组成部分,给文字添加逐帧动画效果,给大家分享一下看效果图

    看完效果,我们来研究一下是怎么实现呢

    4455.gif

    方法步骤

    HTML部分

    1、创建html定义一个包含文本的div大标题同时使用class属性向样式。

    Html编辑代码示例

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

    代码效果

    微信截图_20210901163004.jpg

    Html编辑写好了,然后使用css样式来进行修饰。

    CSS部分

    1、给网页添加背景颜色

    body{
      background:#333;
    }

    2、cell标题文本样式,利用dashed属性添加元素边框的样式和颜色,又利用position:absolute属性是绝对定位放在中间。

    代码示例

    .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标题文本样式利用animation属性steps()逐帧动画,又利用text-shadow属性添加文字阴影和颜色,又利用position:absolute属性是绝对定位放在中间。

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

    接下来,我们给添加动画效果,让文字态动起来实现逐帧动画效果。

    给num标签绑定animation动画。

    使用两个@keyframes规则,给两个动画设置每一帧的动作即可。

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

    最终效果

    4455.gif

    下面给出完整代码

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body{
      background:#333;
    }
    .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;
    }
    .num{
        position:absolute;
        width: 1em;
        color:#E53F39;
        line-height: 1em;  
        text-align: center;
        text-shadow:1px 1px 2px rgba(255,255,255,.3);
        animation: blue 6s steps(1);
    }
    @keyframes run{
        0%{top:0;}
        100%{top:-6em;}
    }
    @keyframes go{
      0%   {opacity:1;}
      85%  {opacity:1;transform:rotate(0deg) scale(1);}
      100% {opacity:0;transform:rotate(360deg) scale(.01);}
    }
    </style>
    </head>
    <body>
    <div>
      <div>昵 称 过 于 强 大</div>
      <!--<div>五 四 三 二 一 零</div>-->
    </div>
    </body>
    </html>

    【完】

    推荐学习:CSS视频教程

    以上就是一步一步教你使用CSS制作文字实现逐帧动画(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css html
    上一篇:手把手教你使用css3制作炫酷的导航栏效果(代码详解) 下一篇:新手篇:如何用ccs制作一个简单的布局(附代码)
    线上培训班

    相关文章推荐

    • 如何用HTML和CSS制作玻璃/模糊效果?• HTML5+CSS3动态画出一个大象• 教你使用css3给字体添加立体效果(附代码)• 使用CSS快速更改PNG图像的颜色(两种方法)• 如何使用HTML5+CSS3动态画一个笑脸

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网