HTML 之 动画

动画是基于 hover 的，和过渡有相似的地方，不过就像动画这两个字，我们是通过 关键帧  (@ keyframes xx )这种有趣的手段来创建动画的。

过度里面使用 transition-xxx ,而我们使用 animation-xxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style type="text/css">
        p{
            width:100px;
            height: 100px;
            background-color: antiquewhite;
        }
        /*动画动画，是以过渡为基础的故也用 hover 标签。注意了啊！ 我们这里没给出长宽和高，这是我们要在动画里面做的*/
        p:hover{
            animation-duration: 1s;  /*在上次的过渡中我们使用的是 transition-xxxx ,现在我们做动画，故使用 animation 标签*/
            animation-delay: 500ms;
            animation-name: 小王; /*关键，这是我们动画的名字*/
            animation-iteration-count: infinite;  /*动画重复无穷次，可以填数x，表示x次 */
            animation-direction: alternate;    /*alternate 动画是交替的 */
        }


        /*然后在 keyframe(关键帧)里处理*/
        /*from是动画最初状态，to是动画最终状态 ，中间的百分数是指动画演到哪个阶段需要怎样动  */
        @keyframes 小王 {
            /*from开始，to结束*/
            from{   /*开始的是130x130*/
                width:130px;
                height: 130px;
                background-color: antiquewhite;
            }
            50%{/*到一半变成 160x160*/
                width: 160px;
                height: 160px;
                background-color: #1122dd;
            }
            80%{
                width: 180px;
                height:189px;
                background-color: #59ed45;
            }
            to{
                width: 200px;
                height: 200px;
                background-color: #41daeb;
            }
        }

    </style>
</head>
<body>
<p> </p>
</body>
</html>

 

posted @ 2018-08-14 17:11  3532  阅读(171)  评论(0)  编辑  收藏  举报