html基础入门----简单动画

小满blue

已于 2022-12-15 15:26:29 修改

阅读量1.7k

点赞数

分类专栏： html基础入门文章标签：动画 html html5

于 2021-09-22 20:56:59 首次发布

本文链接：https://blog.csdn.net/taozi8957/article/details/120422546

版权

html基础入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.实现步骤：

（1）定义动画

（2）执行动画

（1）定义动画

方式一：

@keyframes 动画名{
    form{开始状态}
    to{结束状态}
}

该方式没有中间状态

方式二：

@keyframes 动画名{
    0%{开始状态}
    *%{中间状态}
    100%{结束状态}
}

（2）执行动画

animation：动画名执行时间延迟时间次数曲线执行方向；

次数无数次：infinite

运动曲线匀速：linear

执行方向从form到to,再从to到from：alternate

注意：如果有多个动画执行，用逗号隔开

示例：

圆的缩放

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 设置圆角 */
            border-radius: 50%;
            background: lightblue;
            /* 执行动画 */
            animation: change 3s infinite linear alternate;
        }
        /* 定义动画 */
        @keyframes change{
            from{
                /* 开始状态不变就不写 */
            }
            to{
                width: 400px;
                height: 400px;
                background: pink;
            }
        }
        
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>