CSS3如何实现同时执行倾斜和旋转的动画效果

这篇文章主要介绍了CSS3如何实现同时执行倾斜和旋转的动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

目前成都创新互联已为上千的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、八公山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

先看看静态的效果，运行后的效果更好

示例代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
 <title>css3学习</title>
 <style type="text/css">
 .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);} 
 }
 </style>
</head>
<body>
 <div id="abc" class="d"></div>
</body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3如何实现同时执行倾斜和旋转的动画效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

网站名称：CSS3如何实现同时执行倾斜和旋转的动画效果
网页URL：https://www.cdcxhl.com/article2/psodic.html

成都网站建设公司_创新互联，为您提供关键词优化、虚拟主机、微信小程序、电子商务、做网站、搜索引擎优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容