CSS3实现同时执行倾斜和旋转的动画效果
发布时间：2016-10-27 16:30:46 作者：佚名 
我要评论
我要评论这篇文章通过实例代码给大家主要介绍了，如何利用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实现的鼠标经过文字倾斜线性变换动画特效源码，当鼠标滑过文字时，文字可呈现出倾斜及斜线滑过的效果，且动画过度效果流畅自然2016-06-07
本特效源码是一款效果非常炫酷的HTML5和CSS3图片运动模糊和倾斜效果的代码。图片产生轻微的运动模糊并倾斜的效果2016-03-24
是一款非常有创意的基于jQuery和CSS3单页倾斜分割布局幻灯片特效的代码。该幻灯片特效将整个屏幕倾斜分割为两个部分，在鼠标向下滚动时，图片部分和文本部分会相互切换2015-11-10
今天我们又要来分享一个CSS3动画相册，这款相册的特点是图片可以任意角度的倾斜摆放2015-01-06
这是一款基于CSS3实现的图片特效源码，它可以让网页上的图片倾斜任意的角度，其实在CSS3中实现图片的倾斜非常简单，我们并不需要利用复杂的JS计算各种角度，只要用CSS3的tr2014-08-20- 这篇文章主要介绍了css3实现超立体3D图片侧翻倾斜效果,需要的朋友可以参考下2014-04-16
- 利用了css3的 rolate(旋转) 和 skew (倾斜)样式给页面加个半圆形导航条，具体的实现示例如下，感兴趣的朋友不要错过2014-02-10
- 教大家一个方法使用CSS把整个网页倾斜，代码只有在支持CSS3.0的浏览器上有效果。目前只有IE9以上版本及firefox高版本支持，其它浏览器没有测试2014-01-27
- 如何使用CSS3来定位一个倾斜的图片.2009-11-14
纯CSS3制作图片倾斜45度封页角特效源码是一款常用的图片或者产品列表右上角CSS3标签效果。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用2017-03-07
最新评论