帮助理解animation-timimg-function中steps()的小案例

最新推荐文章于 2021-06-11 00:39:03 发布

~嘘~禁止想象~

最新推荐文章于 2021-06-11 00:39:03 发布

阅读量270

点赞数 1

本文链接：https://blog.csdn.net/weixin_45773503/article/details/104963969

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

HTML5 and CSS3

22 篇文章 0 订阅

订阅专栏

animation-timimg-function

1. 打字机效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /*一个字 20 个像素，div 400px 分20步走*/
            font-size: 20px;
            width: 0;
            height: 30px;
            /*让我们的文字强制在一行内显示*/
            white-space: nowrap;
            /*溢出隐藏*/
            overflow: hidden;
            background-color: aqua;
            animation: w 4s steps(20) 1s 3 forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 400px;
            }
        }
    </style>
</head>

<body>
    <div>当你的能力撑不起你的梦想时，夹紧读书。 </div>
</body>

</html>

2. 跑动的小熊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #4313ff;
        }
        
        body div {
            position: absolute;
            width: 200px;
            height: 92px;
            background: url(1/bear.png) no-repeat !important;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>