<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>纯CSS实现的风车转动效果特效演示</title>

        <style>

  body{

background:#a5cad6;

}

h1{

display:block;

margin:50px auto;

width: 300px;

text-align:center;

font-size:12px;

}

footer {

font:14px/1.3 'Microsoft YaHei';

color: #000;

font-size: 15px;

line-height: 1.6;

padding: 60px 20px 0;

text-align: center;

display: block;

}

footer a{

 color:#000;

    text-decoration:none;

}

footer a:hover{

 text-decoration:underline;

 }

@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}

@-moz-keyframes rotate{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}

@-o-keyframes rotate{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}

@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

@-webkit-keyframes rotate2{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}

@-moz-keyframes rotate2{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}

@-o-keyframes rotate2{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}

@keyframes rotate2{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}

.windmill2 {

display:block;

position: relative;

margin:50px auto;

width: 100px;

height: 120px;

 }

.windmill2 .pillar{

position:absolute;

top:8px;

left:44px;

display: block;

height: 0;

width: 4px;

border-width: 0 4px 80px 4px;

border-style: none solid solid;

border-color: transparent transparent white;

  }

.windmill2 .axis{

position:absolute;

top:0px;

left:46px;

width:4px;

height:4px;

border:3px #fff solid;

background:#a5cad6;

border-radius:5px;

z-index: 88;

-webkit-transition-property: -webkit-transform;

-webkit-transition-duration: 1s;

-moz-transition-property: -moz-transform;

-moz-transition-duration: 1s;

-webkit-animation: rotate 4s linear infinite;

-moz-animation: rotate 4s linear infinite;

-o-animation: rotate 4s linear infinite;

animation: rotate 4s linear infinite;

}

.windmill2 .swing{

position:absolute;

top:1px;

left:-2px;

display: block;

height: 0;

width: 2px;

border-width: 50px 2px 0px 2px;

border-style: solid solid none;

border-color: white transparent transparent ;

box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);

-webkit-transform-origin:0px 0px;

-webkit-transform:rotate(60deg);

-moz-transform-origin:0px 0px;

-moz-transform:rotate(60deg);

-ms-transform-origin:0px 0px;

-ms-transform:rotate(60deg);

-o-transform-origin:0px 0px;

-o-transform:rotate(60deg);

transform-origin:0px 0px;

transform:rotate(60deg);

 }

.windmill2 .swing2{

position:absolute;

top:0px;

left:4.5px;

display: block;

height: 0;

width: 2px;

border-width: 50px 2px 0px 2px;

border-style: solid solid none;

border-color: white transparent transparent ;

-webkit-transform-origin:0px 0px;

-webkit-transform:rotate(180deg);

-moz-transform-origin:0px 0px;

-moz-transform:rotate(180deg);

-ms-transform-origin:0px 0px;

-ms-transform:rotate(180deg);

-o-transform-origin:0px 0px;

-o-transform:rotate(180deg);

transform-origin:0px 0px;

transform:rotate(180deg);

 }

.windmill2 .swing3{

position:absolute;

top:6px;

left:3px;

display: block;

height: 0;

width: 2px;

border-width: 50px 2px 0px 2px;

border-style: solid solid none;

border-color: white transparent transparent ;

-webkit-transform-origin:0px 0px;

-webkit-transform:rotate(300deg);

-moz-transform-origin:0px 0px;

-moz-transform:rotate(300deg);

-ms-transform-origin:0px 0px;

-ms-transform:rotate(300deg);

-o-transform-origin:0px 0px;

-o-transform:rotate(300deg);

transform-origin:0px 0px;

transform:rotate(300deg);

 }

.windmill2 .axis:hover {

-webkit-animation: rotate2 .3s linear infinite;

-moz-animation: rotate2 .3s linear infinite;

-o-animation: rotate2 .3s linear infinite;

animation: rotate2 .3s linear infinite;

} 

  </style>

 </head>

<body>

         <h1>纯css3实现的风车效果(把鼠标放在圆点上试试)</h1>

         <span class="windmill2">

         <span class="pillar"></span>

         <span class="axis">

         <span class="swing"></span>

         <span class="swing2"></span>

         <span class="swing3"></span>

         </span>

         </span>

         <footer>Tutorial by   <a href="bloglaotou.duapp.com">sanyecao</a>  ©2013  </footer>

</body>

</html>

纯CSS实现的风车转动效果特效演示的更多相关文章

  1. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  2. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  3. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  4. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  5. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  6. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  7. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  8. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  9. 纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

随机推荐

  1. [CF106C]Buns

    面包师Lavrenty打算用馅料做几个面包,然后把它们卖掉. Lavrenty有\(n\)克面团和\(m\)种不同的馅料.馅料种类的下标从\(1到m\),他知道他的第\(i\)种馅料剩下\(a_i\) ...

  2. Idea Live Templates

    常用live templates 模板 注释 : * * @param $params$ * @return $return$ * $date$ $time$ chiyuanzhen743 */ lo ...

  3. IMPI Python集群运行报错:

    Intel MPI环境利用hostfile多主机运行下报错 HYDU_process_mfile_token (../../utils/args/args.c:523): token slots no ...

  4. java poi技术读取到数据库

    https://www.cnblogs.com/hongten/p/java_poi_excel.html java的poi技术读取Excel数据到MySQL 这篇blog是介绍java中的poi技术 ...

  5. 如何理解*p++

    后置递增运算符的优先级高于解引用运算符! *p++ 等价于 *(p++) 但是,我们*p++的求值结果不可理解为p+1指向的对象的值,而应该是p指向的对象的值. 这是由于后置++的特性引起的. *p+ ...

  6. CSS3制作各种形状图像（转）

    CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...

  7. lintcode-16-带重复元素的排列

    带重复元素的排列 给出一个具有重复数字的列表,找出列表所有不同的排列. #### 样例 给出列表 [1,2,2],不同的排列有: [ [1,2,2], [2,1,2], [2,2,1] ] 挑战 使用 ...

  8. mysql指定编码格式创建数据库

    CREATE DATABASE `dev` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  9. %pylab ipython 中文

    格式:%pylab [--no-import-all] [gui] 该命令会在ipython或notebook环境中自动加载numpy和matplotlib库,跟以下语句功能一致 import num ...

  10. React Components Template

    React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...