HTML学习笔记——过度属性和动画

最新推荐文章于 2024-05-19 10:07:11 发布

有人看我吗

最新推荐文章于 2024-05-19 10:07:11 发布

阅读量790

点赞数 1

分类专栏：前端文章标签： html css animation

本文链接：https://blog.csdn.net/progammer10086/article/details/81316892

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>过度属性transition动画animation</title>
    <style>
        div{
            border:1px solid red;
            background-color:red;
            width:100px;
            height:100px;
            transition:background-color 1s linear 2s;
            /* 过度属性,过度所需时间,过度动画函数,过度延迟时间 */
        }
        div:hover{
            /* 过度触发机制:hover,active,focus,checked */
            background-color:blue;
        }
        p{
            background-color:red;
            width:100px;
            height:100px;
            animation:name1 2s linear infinite;
            /* 调用关键帧:名字,过度时间,动画函数(匀速),无限次循环 */
        }
        @keyframes name1{/* 设置关键帧 */
            0%{
                width:0px;
                transform:translate(100px, 0);/* 侧移 */
            }
            25%{
                width:20px;
                transform:translate(200px, 0);
            }
            50%{
                width:50px;
                transform:translate(300px, 0);
            }
            75%{
                width:20px;
                transform:translate(200px, 0);
            }
            100%{
                width:0px;
                transform:translate(100px, 0);
            }

        }
    </style>
</head>
<body>
    <div>

    </div>
    <p></p>
</body>
</html>

有人看我吗

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记——过度属性和动画

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;过度属性transition动画animation&lt;/title&gt; &lt;style&gt; div
复制链接

扫一扫