CSS3学习---动画

最新推荐文章于 2024-05-23 22:54:35 发布

兰兰的风。。。

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量99

点赞数

分类专栏： # css 文章标签： css3 动画

本文链接：https://blog.csdn.net/pilgrim_121/article/details/111402156

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！

动画的使用方法

定义动画
调用

案例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>
        img {
            width: 100px;
            /* 调用动画 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 10s;
            /*动画被播放次数,默认是1（infinite表示无限次）  */
            animation-iteration-count: infinite;
        }
        /* 动画的定义 */
        @keyframes move {
            /* 开始 */
            0% {
                transform: translate(0px, 0px);
            }
            25% {
                transform: translate(1000px, 0px);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0px, 500px);
            }
            /* 结束 */
            100% {
                transform: translate(0px, 0px);
            }
        }
    </style>
</head>
<body>
    <div>
        <img src="imgs/hop.png" alt="">
    </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: #ccc;
        }
        
        .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(imgs/bear.png) no-repeat;
            /* 动画1bear：图片长度是1600px，共8个动作，所以盒子宽度设为200px，分8步动画实现熊走动；
            动画2move：移动到屏幕中央，保持位置 */
            animation: bear 5s steps(8) infinite, move 5s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                bottom: 10px;
                left: 0px;
            }
            100% {
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>

    <div class="bear">

    </div>


</body>

</html>

兰兰的风。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS3学习---动画

声明：以下内容为个人学习总结，初衷是方便自己学习复习记录。如有错误之处，烦请多多指正！动画的使用方法定义动画调用定义好的动画初步使用效果：使气球转一圈实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
复制链接

扫一扫