css的动画

最新推荐文章于 2022-09-20 12:53:23 发布

大神大咖大牛

最新推荐文章于 2022-09-20 12:53:23 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/wld1509B/article/details/78451883

版权

//帧动画

<style>

@-webkit-keyframes 'wobble'{
       0%{
           margin-left:100px;
           background-color:green;
       }
        40%{
           margin-left:200px;
           background-color:orange;
       }
        60%{
           margin-left:300px;
           background-color:blue;
       }
        100%{
           margin-left:400px;
           background-color:red;
       }
   }
   .div{
       width:50px;
       height:50px;
       margin-left:100px;
       background-color:blue;
       -webkit-animation-name:'wobble';/**/
       -webkit-animation-duration:10s;/**/
       -webkit-animation-iteration-count:3;/**/
       -webkit-animation-direction:alternate;/**/
       }
</style>
</head>

<body>
   <div class="div">
     我的div
   </div>

</body>

//动画