以前制作网页动画一般使用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. 初学Android开发怎么开始？

    在几个Android开发者群里面总是碰到新人提出这样的问题:"我想学Android开发,但是不知道怎么开始,不知道要学一些什么."  其实,我在最开始学习Android开发的时候也 ...

  2. （转载）细说PHP中strlen和mb_strlen的区别

    (转载)http://developer.51cto.com/art/201105/263103.htm 在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果 ...

  3. XJOI——NOIP2015提高组模拟题19-day1——观光旅行

    http://www.hzxjhs.com:83/contest/493/problem/3 [题目大意] 给定一个有n(n<=500000)个点,m(1<=500000)条边的无向图.给 ...

  4. ASPNET异步删除和增加

    function InitList() { $.getJSON("GetNewsList.ashx", {}, function (data) { for (var i = 0; ...

  5. 【树形动态规划】【CTSC1997】选课 解题报告

    CTSC1997-选课 描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修了这 ...

  6. arc4random和arc4random_uniform

    Objective-C 中有个arc4random()函数用来生成随机数且不需要种子,但是这个函数生成的随机数范围比较大,需要用取模的算法对随机值进行限制,有点麻烦. 其实Objective-C有个更 ...

  7. 在sql语句中使用plsql变量

    示例代码如下: create or replace type ua_id_table is table of number; declare v_tab ua_id_table;begin v_tab ...

  8. 关于C#泛型列表List<T>的基本用法总结

    //示例代码如下:using System;using System.Collections.Generic;using System.Collections.ObjectModel;namespac ...

  9. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  10. 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...