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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python发送邮件脚本
2018/05/22 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
2016年度员工工作表现评语
2015/12/02 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
解决python存数据库速度太慢的问题
2021/04/23 Python