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实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
解析strtr函数的效率问题
2013/06/26 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python之list对应元素求和的方法
2018/06/28 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python实现图片识别汽车功能
2018/11/30 Python
python中append实例用法总结
2019/07/30 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python调用飞书发送消息的示例
2020/11/10 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
酒店管理自荐信
2013/10/23 职场文书
三年级数学教学反思
2014/01/31 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
任命通知范文
2015/04/21 职场文书
学生通报表扬范文
2015/05/04 职场文书