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 ...
随机推荐
- html标签SEO规范
原文地址:http://blog.sina.com.cn/s/blog_6c3898dd0100whr7.html 1.<!--页面注解--> 2.<html> 3.<h ...
- 1122 Hamiltonian Cycle （25 分）
1122 Hamiltonian Cycle (25 分) The "Hamilton cycle problem" is to find a simple cycle that ...
- win10 php7.2 nginx 安装 imagick，适用于phpstudy
imagick 拓展的下载地址 https://windows.php.net/downloads/pecl/releases/imagick/ 可惜的是这个地址最新版没有php7.2, 如果是7.1 ...
- Html5弹幕视频播放器插件
Danmmu Player是一个具备弹幕功能的Html5视频播放器.我们在观看视频的时候,可以对视频发表自己的观点,当点击发送按钮后,发表的内容会在视频屏幕上以彩弹的形式发出,并做滚动展示动画效果,即 ...
- [UE4][Canvas]用C++代码绘制血条(HealthBar)
转自:http://aigo.iteye.com/blog/2275110 参考自Epic官方项目StrategyGame 血条效果: StrategyHUD.h StrategyHUD.cpp
- 三种方式控制GPIO
BBB为REV C,emmc4G版本,系统为Debian 7.9 wheezy (2015.11.12),内核为Linux 3.8.13.使用命令cat /etc/dogtag查看 查看系统信息的四种 ...
- Struts2访问web元素的各种方法
1.通过RequestAware,SessionAware,ApplicationAware获取: 在Struts2中不能直接访问Request,Session,Application元素,但是可以使 ...
- Device supprts x86,armeabi-v7a,but APK only aupports armeabi；模拟机不能运行。
在真机可以运行,模拟机却不可以: 这个是模拟机: 修改: defaultConfig { ndk{ abiFilters "armeabi" } } 为: defaultConfi ...
- MySQL多表查询，pymysql模块。
一 多表查询: 首先什么是多表查询: 我们在实际工作中,不可能把数据都存入一个表中,那么又需要这些表之间有一定的关联,因为表与表之间的数据是相关联的,所以就要用到我们的外键将多表连接到一起,那么我们更 ...
- gulp安装，淘宝镜像
命令:express -e ./ express表示安装express -e表示使用ejs作为模板 ./表示当前目录中 (使用上面的命令之前我们应该使用npm安装express框架 sudo npm ...