css3模拟微信摇一摇

最新推荐文章于 2022-08-05 17:45:12 发布

hu_mouse

最新推荐文章于 2022-08-05 17:45:12 发布

阅读量950

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/hu_mouse/article/details/46694883

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

.yao .pic_mobel{

width:100%; height:100%; background:url(../images/yao.png) no-repeat left top; background-size:100%;

transform-origin:center;

-webkit-animation: pic_mobel 2s infinite;

-moz-animation: pic_mobel 2s infinite;

-o-animation:pic_mobel 2s infinite;
animation: pic_mobel 2s infinite;
-moz-transform-origin:center;
-ms-transform-origin:center;
-o-transform-origin:center;
transform-origin:center;

/*-webkit-transform: rotate(255deg);
-moz-transform: rotate(255deg);
-o-transform: rotate(255deg);
-ms-transform: rotate(255deg);
transform: rotate(255deg);   */
}
@keyframes pic_mobel{
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);
   }
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
   }

@-moz-keyframes pic_mobel{
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);
   }
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }

   }

@-webkit-keyframes pic_mobel{
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);
   }
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
   }

@-webkit-keyframes pic_mobel{
0%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
25%{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
50%{
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-ms-transform: rotate(25deg);
transform: rotate(25deg);
   }
100%{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
   }
   }