您的位置：首页 > Web前端 > HTML

利用html 动画做出一个 "王" 字

2017-12-28 20:49 316 查看

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title></title>

       <style>





           .div1{

               margin: 0 auto;

               width: 20px;

               height: 140px;

               background-color: red;

               transition: all 1s ease-out 1s;

           }

           .div1:hover{

               background-color: blue;



               transform: scale(1,1) rotate(90deg) translate(80px,0px);

           }



           .div2{

               margin: 0 auto;

               width: 100px;

               height: 100px;

               background-color: red;

               animation: secondA 5s 1 linear running forwards;

           }

           /*动画*/

           @keyframes fristA{

               from{background-color: red;}

               to{background-color: brown;}

           }

           @keyframes secondA{

               0% {background-color: red; width: 100px; height: 100px; transform: rotate(30deg);}

               25% {background-color: yellow; width: 90px; height: 110px; transform: translate(200px,0px);}

               50% {background-color: blueviolet; width: 80px;height: 120px; transform: scale(2,2);}

               75% {background-color: brown; width: 70px; height: 130px; top: 400px;}

               100% {background-color: brown; width: 20px;height: 100px; top: 0px;}

           }



           .div4{

               margin: 0 auto;

               width: 100px;

               height: 100px;

               background-color: red;

               animation: secondAA 5s 1 linear running forwards;

           }

           /*动画*/

           @keyframes fristAA{

               from{background-color: red;}

               to{background-color: brown;}

           }

           @keyframes secondAA{

               0% {background-color: red; width: 100px; height: 100px; transform: rotate(30deg);}

               25% {background-color: yellow; width: 90px; height: 110px; transform: translate(0px,200px);}

               50% {background-color: blueviolet; width: 80px;height: 120px; transform: scale(2,2);}

               75% {background-color: brown; width: 70px; height: 130px; top: 400px;}

               100% {background-color: brown; width: 20px;height: 100px; top: 0px;}

           }

           .div3{ margin:0 auto; width: 140px; height: 20px;background-color: #0000FF;}

       </style>

   </head>

   <body>



       <div class="div1"></div>

       <div class="div2"></div>

       <div class="div3"></div>

       <div class="div4"></div>

       <div class="div3"></div>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航