速度曲线步长及奔跑的小熊案例

最新推荐文章于 2022-11-10 11:19:26 发布

WangZhang_521

最新推荐文章于 2022-11-10 11:19:26 发布

阅读量121

点赞数

分类专栏： CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122458418

版权

CSS3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

速度曲线步长

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>速度曲线步长</title>
    <!-- 速度曲线-步长可以实现打字机效果 -->
    <style>
        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: brown;
            /* 让我们的文字强制一行显示 */
            word-spacing: nowrap;
            /* steps 就是分几步完成动画，有了steps就不用写ease或者linear了 */
            /* 分10步走完200像素 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

</html>

效果展示

在这里插入图片描述

02-奔跑的小熊案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奔跑的小熊案例</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(../media/bear.png) no-repeat;
            /* 元素可以添加多个动画，用逗号分隔 */
            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;
            }
                            /* 想要小熊在浏览器的中间，先让小熊走浏览器的一半，再减去div自己的一半 */

            100% {
                left: 50%;
                /* 走自己宽度的一半 */
                /* 1.margin-left: -100px; */
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果展示

在这里插入图片描述

WangZhang_521

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
速度曲线步长及奔跑的小熊案例

速度曲线步长<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫

专栏目录