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 ...
随机推荐
- Android-PullToRefresh 下拉刷新增加setOnItemLongClickListener
项目地址:https://github.com/chrisbanes/Android-PullToRefresh 不知道为什么这个项目没有给listview 加 OnItemLongClickLis ...
- [UE4]创建游戏、加入游戏
google搜: UE4 compile dedicated server,编译UE4专用服务器 UE4默认网络端口可以在引擎配置文件中修改: 一.创建文件.需要修改一下工程的配置文件DefaultE ...
- [UE4]枚举Enum和Switch Enum
- Socket的长连接和短连接
讨论Socket必讨论长连接和短连接 一.长连接和短连接的概念 1.长连接与短连接的概念:前者是整个通讯过程,客户端和服务端只用一个Socket对象,长期保持Socket的连接:后者是每次请求,都新建 ...
- vue todolist 封装localstorage
//封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...
- [UE4]C++代码实现播放粒子特效
转自:http://aigo.iteye.com/blog/2273345 函数参数说明(在GameplayStatics.h中) 将一个粒子放到指定位置上播放: 另一种重载形式: 将一个粒子atta ...
- 如何查看yum 安装的软件路径
1.首先安装一个redis [root@iZbp1eem925ojwyx17ao9kZ ~]# yum install redis 2.查找redis的安装包 [root@iZbp1eem925ojw ...
- windows下安装、卸载mysql服务
将下载下来的mysql解压到指定目录下(如:d:\mysql)安装服务在命令行输入d:\mysql\bin\mysqld -installnet start mysql卸载服务在命令行输入net st ...
- xcode pod install 安装失败，提示缺少文件
I had the same problem in Xcode 6.1.1. I did the following to solve it: Set the configuration file s ...
- spark 2.0.0集群安装与hive on spark配置
1. 环境准备: JDK1.8 hive 2.3.4 hadoop 2.7.3 hbase 1.3.3 scala 2.11.12 mysql5.7 2. 下载spark2.0.0 cd /home/ ...