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


Posted in HTML / CSS onOctober 27, 2016

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

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实现同时执行倾斜和旋转动画效果的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
You might like
一段php加密解密的代码
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
js实现放大镜特效
2017/05/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JS实现自定义弹窗功能
2018/08/08 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python3中的json模块使用详解
2018/05/05 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
教师考核材料
2014/05/21 职场文书
《刷子李》教学反思
2016/02/20 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
详解Python常用的魔法方法
2021/06/03 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS