CSS3 之转动的风车
js 可以做动画，但是需要写很多代码；其实css也是可以做动画的，而且比js写的代码还少，理解也相对简单。
这里用到css3 的animation 属性，它配合着 @keyframes 规则来使用，可以得到较好的效果
使用方法：
animation : name duration timing-function delay interation-count direction
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
例如：
@keyframes mydonghua{
from{background:red;}
to{background:yellow;}
}
这表示动画 mydonghua 的初始值background的值为red,最终值是 background:yellow;
浏览器支持状况：
下面做一个动画效果：转动的风车
模式：三张图片围绕中心点（即Z轴）循环转动
html 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转动的风车</title>
<link rel="stylesheet" href="css/fengche000.css">
</head>
<body>
<ul>
<li><img src="img/fengche_1.png"></li>
<li><img src="img/fengche_2.png"></li>
<li><img src="img/fengche_3.png"></li>
</ul>
</body>
</html>
css 代码：
* {
margin: 0px;
padding: 0px;
}
ul li {
position: absolute;
left: 20%;
top: 10%;
width: 500px;
height: 500px;
list-style-type: none;
}
ul li img{
position:relative;
display:inline-block;
width:100%;
height:100%;
}
/*nth-of-type(1):选中第一个li*/
ul li:nth-of-type(1) {
/*animation:动画*/
/*move1: 调用动画move1, 下面keyframes定义的move1*/
/*5s: 在5秒内完成动画move1 里面定义的动作*/
/*linear: 匀速运动*/
/*infinite: 运动重复无限次*/
animation: move1 5s linear infinite;
}
ul li:nth-of-type(2) {
animation: move2 10s linear infinite;
}
ul li:nth-of-type(3) {
animation: move1 10s linear infinite;
}
@keyframes move1 {
/*
from: 相当于%0 动画的第一个阶段
to: 相当于100% 动画的第二个阶段
*/
from {
/*transform: 变形*/
/*rotateZ: 以y轴为圆心旋转 从0度开始*/
transform: rotateZ(0deg);
}
to {
/*rotateZ: 以y轴为圆心旋转 顺时针运动到360度*/
transform: rotateZ(360deg);
}
}
@keyframes move2 {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(-360deg);
}
}
运行效果：
CSS3 之转动的风车的更多相关文章
- css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- 如何用css3实现风车效果
前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- 用css3实现风车效果
前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...
- CSS3制作旋转的小风车
制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...
- css3 风车旋转
<style> .box{width:400px;height:400px;margin:100px auto;transition:1s;} .box div{width:180px;h ...
- CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
- requestAnimationFrame制作动画：旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- html5 requestAnimationFrame制作动画：旋转风车
详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
随机推荐
- [UE4]装饰器：Blackboard（装饰器的一种，不是黑板）
装饰器Blackboard可以检查黑板的值是否满足期望的条件: 添加“Blackboard装饰器”:在组合或者任务节点上右键“添加装饰器...”,跟普通装饰器一样. Notify Observer:通 ...
- 本机无法访问虚拟机里面的nginx的80端口
在虚拟机VMware上装好了centos6.9,并配好了nginx,但是本机就是无法访问.具体情况如下1.本机能ping通虚拟机2.虚拟机也能ping通本机3.虚拟机能访问自己的web4.本机无法访问 ...
- XrmToolBox 连接
- 用dlopen，dlsym加载动态链接库.so中函数
代码如下 static void *findSymbol(const char *path, const char *symbol) { void *handle = dlopen(path, RTL ...
- 修改IP和DNS的dos命令
修改IP,掩码,网关命令: netsh interface ip set address "本地连接" static 192.168.3.188 255.255.255.0 192 ...
- windows下maven的安装
1.下载maven的zip包,下载地址:http://maven.apache.org/download.cgi 2.解压到F:\maven 3.修改环境变量: MAVEN_HOME:F:\maven ...
- lunix nginx安装 报错页面 状态码
web服务器软件IIS (windows底下的web服务器软件) Nginx (Linux底下新一代高性能的web服务器) Tengine www.taobao.com 这是淘宝 Apach ...
- ToList()分组用法...
- VMware扩展Linux根目录磁盘空间（Centos版本）
1.Centos 关机,选择编辑虚拟机设置,硬盘,在实用工具那里选择“扩展”,指定你需要的存储大小 2.启动客户机操作系统Centos,查看磁盘情况 输入指令 fdisk -l 显示结果如下 Disk ...
- mysql给查询的结果添加序号
1.法一: select (@i:=@i+1) i,a.url from base_api_resources a ,(select @i:=0) t2 order by a.id de ...