【html5和css3】animation属性整理

最新推荐文章于 2024-07-29 14:14:21 发布

半缘修道半缘君丶

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量2.8k

点赞数

分类专栏： HTML5/CSS3 文章标签： html5 css3 动画

本文链接：https://blog.csdn.net/LIU_YANZHAO/article/details/50897736

版权

HTML5/CSS3 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

常做笔记，踏实学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="abc.css">
    <title></title>
    <style>
            .div1{
                width: 500px;
                height: 500px;
                border-radius: 50%;
                margin:0 auto;
                background-color: #333;
                animation: changewidth 2s ease-in-out 0s 50 alternate ;}/*这里animation的值可以填6个，分别标志为①②③④⑤⑥*/

        @keyframes changewidth
        {
                0%{width: 500px;background-color: black;}
                50%{width: 0;background-color: aqua;}
                100%{width: 500px;background-color: red;}
         }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>