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 ...
随机推荐
- Java zxing生成二维码所需的jar包
免费的,不需要积分. 共有2个jar包, 链接: https://pan.baidu.com/s/1QJcEkRQOp1NdrNAgGC6LvQ 密码: 4524
- 基于拖放布局的 Twitter Bootstrap 网站生成器
简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够 ...
- [AH2017/HNOI2017]大佬(动态规划 搜索)
/* 神仙yyb 理解题意可以发现 能够对大佬造成的伤害只和你怼了多少天大佬有关, 而且显然天数越多越好 那么我们可以先通过预处理来找出我们最多能够怼多少天大佬 然后我们发现最后我们能怼的血量状态数是 ...
- pyhton框架Django之cookie和session
一,cookie和session的理解 cookies 是浏览器为 Web 服务器存储的一小段信息. 每次浏览器从某个服务器请求页面时,它向服务器回送之前收到的cookies.它保存在浏览器下的某个文 ...
- C# .NET Web Api 保存Session
Global.asax中添加: public override void Init() { this.PostAuthenticateRequest += (sender, e) => Http ...
- 字符串截取函数slice, substring, substr
在日常项目需求中,常常会遇到需要截取字符串操作的工作,而ECMAScript为我们提供了原生的截取字符串的函数,而且提供了三个:slice, substring, substr.我们怎么判断在什么时候 ...
- 【Linux】使用ZStack私有云创建本地Linux服务器
1.运维配置了一台Linux的主机,然后安装了ZStack,前面这部分操作运维处理了. 2.首先打开Zstack的网址地址,一般是一个IP地址(此时不写) 3.然后进入页面后,默认进入首页,此时可以按 ...
- 20165205 《Java程序设计》第一周学习总结
20165205 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 安装JDK1.8,Git(在虚拟机内) 了解Git的使用方法 学习了vim的使用方法(很难) ...
- python协程的使用
1.Python对协程的支持是通过generator(生成器 yield)实现的.协程执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 2.调用生成器运行的过程中 ...
- [Unity插件]Lua行为树(六)：打印树结构
经过前面的文章,已经把行为树中的四种基本类型节点介绍了下.接下来可以整理一下,打印一下整棵行为树.注意点如下: 1.可以把BTBehaviorTree也当作一种节点,这样就可以方便地进行行为树嵌套了 ...