CSS3如何实现同时执行倾斜和旋转的动画效果
这篇文章主要介绍了CSS3如何实现同时执行倾斜和旋转的动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
目前成都创新互联已为上千的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、八公山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
先看看静态的效果，运行后的效果更好
.jpg)
示例代码如下
css3学习
.d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
-webkit-animation:abc 2s infinite linear;
animation:abc 2s infinite linear;
}
/*chrome,Safari,ff,o测试没问题，IE11一闪一闪的*/
@keyframes abc{
0% {transform:skew(20deg) rotate(0deg);}
50% {transform:skew(20deg) rotate(180deg);}
100% {transform:skew(20deg) rotate(360deg);}
}
@-webkit-keyframes abc{
0% {-webkit-transform:skew(20deg) rotate(0deg);}
50% {-webkit-transform:skew(20deg) rotate(180deg);}
100% {-webkit-transform:skew(20deg) rotate(360deg);}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3如何实现同时执行倾斜和旋转的动画效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
本文题目：CSS3如何实现同时执行倾斜和旋转的动画效果
网站网址：
http://kswjz.com/article/psodic.html
