以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大。以下是一个纯CSS3制作的风车旋转动画,而且也用CSS 3控制速度。

体验效果:
http://hovertree.com/texiao/css3/40/

效果图:

可以看到,风车的叶片是三角形,使用css画各种图形请参考:
http://hovertree.com/h/bjaf/jtkqnsc1.htm
http://hovertree.com/h/bjaf/ltgc20vn.htm

css制作动画是用到了animation属性,请参考:
http://hovertree.com/h/bjaf/i309b77d.htm
http://hovertree.com/h/bjaf/fwck53gt.htm
http://hovertree.com/h/bjaf/xpxgjfap.htm
http://hovertree.com/h/bjaf/kqud99m6.htm

扇叶的旋转使用到了transform属性,参考:
http://hovertree.com/h/bjaf/c3bshswk.htm
http://hovertree.com/h/bjaf/lxsexx3m.htm

本示例用到了CSS 3的选择器nth-of-type,参考:
http://hovertree.com/h/bjaf/c2c0k0tf.htm

下面给出本示例的代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>可控制转速CSS3旋转风车特效 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/40/style/hovertreespin.css">
</head>
<body>
<div class="wrapper">
<div class="pin-layout">
<a href="#" class="control">暂停</a>
<a href="#" class="control">旋转</a>
<a href="#" class="control">中速</a>
<a href="#" class="control">高速</a>
<div class="pillar">
<div class="dot"></div>
<span class="item1"></span>
<span class="item2"></span>
<span class="item3"></span>
<span class="item4"></span>
</div>
</div>
<p><b>何问起温馨小提示:</b>暂停后点击页面任何区域都可自动旋转哦!</p>
</div><!-- end wrapper -->
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用于支持CSS3的浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/efqb2w4s.htm" target="_blank">说明</a></p>
</div>
</body>
</html>

CSS文件代码:

*{margin:; padding:;}
body{background:#eee;width:100%; height:100%;}
.wrapper{
position: relative;
width: 800px;
height:450px;
margin:60px auto 0;
}
.wrapper .pin-layout{
position: absolute;
bottom:;
left: calc(50% - 20px);
width:40px;
height:280px;
}
.wrapper .pin-layout::after{
position:absolute;
bottom:;
left: calc(50% - 20px);
content:"";
height:;
width:10px;
border-width: 0px 15px 280px 15px;
border-style:solid;
border-color:transparent transparent #6B3500 transparent;
}
.wrapper .pin-layout .pillar{
position: absolute;
top: -18px;
left: calc(50% - 18px);
width:36px;
height:36px;
z-index:;
transform: rotateZ(45deg);
transition:all .9s linear;
animation: hovertreespin 3s linear 0s infinite;
}
.pin-layout .control:hover::after{
position: absolute;
left:;
content: "";
width: 100%;
height:100%;
background: rgba(0,0,0,.3);
}
.pin-layout .control{
position: absolute;
bottom:;
width: 80px;
height:30px;
line-height:30px;
border: 1px solid #ADADAD;
border-radius: 4px;
text-align:center;
text-decoration:none;
letter-spacing:2px;
color: white;
background: red;
}
.pin-layout .control:nth-of-type(1){
left: -100px;
}
.pin-layout .control:nth-of-type(3):focus ~ .pillar{
animation-duration:.8s;
}
.pin-layout .control:nth-of-type(4):focus ~ .pillar{
animation-duration:.2s;
}
.pin-layout .control:nth-of-type(2){
right: -100px;
background: green;
}
.pin-layout .control:nth-of-type(3){
bottom: -40px;
left: -100px;
background: #037862;
}
.pin-layout .control:nth-of-type(4){
bottom: -40px;
right: -100px;
background: #036B3E;
}
.pin-layout .control:nth-of-type(1):focus ~ .pillar{
animation-play-state:paused;
}
.pin-layout .control:nth-of-type(2):focus ~ .pillar{
animation-play-state:running;
}
.pin-layout .pillar span[class^="item"]{
position: absolute;
top: calc(-200px + 18px);
left: 18px;
border-width:0px 80px 200px 0px;
border-style:solid;
}
.pin-layout .pillar span[class^="item"]:nth-of-type(1){
z-index:;
border-color:transparent transparent dodgerblue transparent;
/*border-color:green red gray blue;*/
}
.pin-layout .pillar span[class^="item"]:nth-of-type(2){
z-index:;
border-color:transparent transparent orangered transparent;
transform-origin:left bottom;
transform: rotateZ(90deg);
}
.pin-layout .pillar span[class^="item"]:nth-of-type(3){
z-index:;
border-color:transparent transparent greenyellow transparent;
transform-origin:left bottom;
transform: rotateZ(180deg);
}
.pin-layout .pillar span[class^="item"]:nth-of-type(4){
z-index:;
border-color:transparent transparent mediumpurple transparent;
transform-origin:left bottom;
transform: rotateZ(270deg);
}
.wrapper .pin-layout .pillar .dot{
position: absolute;
top:;
left:;
border-width: 19px;
border-style: solid;
border-color: #3C0505 transparent #3C0505 transparent;
border-radius:50%;
background:#F505EE;
z-index:;
box-shadow:0 0 2px #1A0505;
}
@keyframes hovertreespin {
0%{
transform: rotate(0deg)
}
100%{
transform:rotate(360deg);
}
}

使用图片扇叶的风车:
http://hovertree.com/h/bjaf/h9tb5itb.htm

特效集合:

http://www.cnblogs.com/roucheng/p/texiao.html

可控制转速CSS3旋转风车特效的更多相关文章

  1. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  2. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  3. 利用CSS3给图片添加旋转背景特效

    首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html 这是一款纯CSS3实现的当鼠标滑过图片时文字 ...

  4. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  5. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  6. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  7. html5 requestAnimationFrame制作动画:旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  8. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  9. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. bzoj3890 [Usaco2015 Jan]Meeting Time

    Description Bessie and her sister Elsie want to travel from the barn to their favorite field, such t ...

  2. 你不知道的关于计算机大师 Dijkstra 的事情

    Dijkstra 的全名叫 Edsger Wybe Dijkstra(艾兹赫尔·韦伯·戴克斯特拉).大部分中国程序员如果能记住这个名字是因为学过计算最短路径的「Dijkstra 算法」,然而大部分人都 ...

  3. (1.1.9)UVA 10930 A-Sequence(模拟)

    /* * UVA_10930_1.cpp * * Created on: 2013年10月7日 * Author: Administrator */ #include <iostream> ...

  4. [置顶] VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别

    1.共同点: chr(10):换行,相当于VBLF chr(13):回车,相当于VBCR chr(13)+chr(10):回车+换行,相当于VBCRLF cr是回车,只有回车,是到本行的最头上:lf是 ...

  5. Flask 中的 SQLAlchemy 使用教程

    Flask 是一个 python web micro framework.所谓微框架,主要是 flask 简洁与轻巧,自定义程度高.相比 django 更加轻量级. 之前一直折腾 django,得益于 ...

  6. Jenkins配置Java项目1(Java+Maven+Tomcat)

    先收集几个网址,后续再自己动手过一遍 http://www.cnblogs.com/sunzhenchao/archive/2013/01/30/2883289.html https://my.osc ...

  7. "解密"微信开放高级接口 企业如何应对

    今天(2013年10月29日)腾讯终于对外公开了微信公众平台最新的接口,一石激起千层浪,对于很多微信公众平台的运营人员来说,今天是令人兴奋的一天!微信在向申请服务号的企业开发了大量接口.用户不想输入文 ...

  8. DELL RACADM 批量升级戴尔IDRAC固件

    需求:通过服务器远程管理IP批量升级戴尔IDRAC固件 工具:racadm.ipmitool.Remote Access Configuration Tool 下载: 第一步,将要更新BMC IP写入 ...

  9. ZOJ3161

    朴素动态规划 ZOJ3161 题意:(严重标题党)老板不想让客人走,客人不想留,客人按顺序排好,老板抽8g(书上翻译成八卦,神翻译),抽到的 如果相邻,其中一个人由客人决定离开,求最后黑心的老板最多能 ...

  10. jquery插件--多行文本缩略

    1.webkit内核多行缩略样式 text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orie ...