欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3实现倾斜和旋转动画效果

程序员文章站 2022-04-08 16:37:07
...
这次给大家带来CSS3实现倾斜和旋转动画效果,实现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>
 <p id="abc" class="d"></p>
</body>
</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

左侧固定,右侧自适应的布局方式

瀑布流布局与无限加载图片相册效果

opacity透明度滤镜的IE兼容解决方法

以上就是CSS3实现倾斜和旋转动画效果的详细内容,更多请关注其它相关文章!