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 相关文章推荐
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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 win下Socket方式发邮件类
2009/08/21 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
pytorch 常用线性函数详解
2020/01/15 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python实现粒子群算法的示例
2021/02/14 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
上级检查欢迎词
2014/01/18 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
就业推荐表院系意见
2015/06/05 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers