1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <title>纯CSS实现的风车转动效果特效演示</title>
  6.         <style>
  7.   body{
  8. background:#a5cad6;
  9. }
  10. h1{
  11. display:block;
  12. margin:50px auto;
  13. width: 300px;
  14. text-align:center;
  15. font-size:12px;
  16. }
  17. footer {
  18. font:14px/1.3 'Microsoft YaHei';
  19. color: #000;
  20. font-size: 15px;
  21. line-height: 1.6;
  22. padding: 60px 20px 0;
  23. text-align: center;
  24. display: block;
  25. }
  26. footer a{
  27.  color:#000;
  28.     text-decoration:none;
  29. }
  30. footer a:hover{
  31.  text-decoration:underline;
  32.  }
  33.  
  34. @-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
  35. @-moz-keyframes rotate{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}
  36. @-o-keyframes rotate{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}
  37. @keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
  38. @-webkit-keyframes rotate2{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}
  39. @-moz-keyframes rotate2{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}
  40. @-o-keyframes rotate2{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}
  41. @keyframes rotate2{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
  42.  
  43. .windmill2 {
  44. display:block;
  45. position: relative;
  46. margin:50px auto;
  47. width: 100px;
  48. height: 120px;
  49.  }
  50.  
  51. .windmill2 .pillar{
  52. position:absolute;
  53. top:8px;
  54. left:44px;
  55. display: block;
  56. height: 0;
  57. width: 4px;
  58. border-width: 0 4px 80px 4px;
  59. border-style: none solid solid;
  60. border-color: transparent transparent white;
  61.   }
  62. .windmill2 .axis{
  63. position:absolute;
  64. top:0px;
  65. left:46px;
  66. width:4px;
  67. height:4px;
  68. border:3px #fff solid;
  69. background:#a5cad6;
  70. border-radius:5px;
  71. z-index: 88;
  72. -webkit-transition-property: -webkit-transform;
  73. -webkit-transition-duration: 1s;
  74. -moz-transition-property: -moz-transform;
  75. -moz-transition-duration: 1s;
  76. -webkit-animation: rotate 4s linear infinite;
  77. -moz-animation: rotate 4s linear infinite;
  78. -o-animation: rotate 4s linear infinite;
  79. animation: rotate 4s linear infinite;
  80. }
  81. .windmill2 .swing{
  82. position:absolute;
  83. top:1px;
  84. left:-2px;
  85. display: block;
  86. height: 0;
  87. width: 2px;
  88. border-width: 50px 2px 0px 2px;
  89. border-style: solid solid none;
  90. border-color: white transparent transparent ;
  91. box-shadow: 1px 1px 1px rgba(105, 97, 97, 0.1);
  92. -webkit-transform-origin:0px 0px;
  93. -webkit-transform:rotate(60deg);
  94. -moz-transform-origin:0px 0px;
  95. -moz-transform:rotate(60deg);
  96. -ms-transform-origin:0px 0px;
  97. -ms-transform:rotate(60deg);
  98. -o-transform-origin:0px 0px;
  99. -o-transform:rotate(60deg);
  100. transform-origin:0px 0px;
  101. transform:rotate(60deg);
  102.  }
  103. .windmill2 .swing2{
  104. position:absolute;
  105. top:0px;
  106. left:4.5px;
  107. display: block;
  108. height: 0;
  109. width: 2px;
  110. border-width: 50px 2px 0px 2px;
  111. border-style: solid solid none;
  112. border-color: white transparent transparent ;
  113. -webkit-transform-origin:0px 0px;
  114. -webkit-transform:rotate(180deg);
  115. -moz-transform-origin:0px 0px;
  116. -moz-transform:rotate(180deg);
  117. -ms-transform-origin:0px 0px;
  118. -ms-transform:rotate(180deg);
  119. -o-transform-origin:0px 0px;
  120. -o-transform:rotate(180deg);
  121. transform-origin:0px 0px;
  122. transform:rotate(180deg);
  123.  }
  124. .windmill2 .swing3{
  125. position:absolute;
  126. top:6px;
  127. left:3px;
  128. display: block;
  129. height: 0;
  130. width: 2px;
  131. border-width: 50px 2px 0px 2px;
  132. border-style: solid solid none;
  133. border-color: white transparent transparent ;
  134. -webkit-transform-origin:0px 0px;
  135. -webkit-transform:rotate(300deg);
  136. -moz-transform-origin:0px 0px;
  137. -moz-transform:rotate(300deg);
  138. -ms-transform-origin:0px 0px;
  139. -ms-transform:rotate(300deg);
  140. -o-transform-origin:0px 0px;
  141. -o-transform:rotate(300deg);
  142. transform-origin:0px 0px;
  143. transform:rotate(300deg);
  144.  }
  145. .windmill2 .axis:hover {
  146. -webkit-animation: rotate2 .3s linear infinite;
  147. -moz-animation: rotate2 .3s linear infinite;
  148. -o-animation: rotate2 .3s linear infinite;
  149. animation: rotate2 .3s linear infinite;
  150. } 
  151.  
  152.   </style>
  153.  </head>
  154. <body>
  155.  
  156.          <h1>纯css3实现的风车效果(把鼠标放在圆点上试试)</h1>
  157.          <span class="windmill2">
  158.          <span class="pillar"></span>
  159.          <span class="axis">
  160.          <span class="swing"></span>
  161.          <span class="swing2"></span>
  162.          <span class="swing3"></span>
  163.          </span>
  164.          </span>
  165.          <footer>Tutorial by   <a href="bloglaotou.duapp.com">sanyecao</a>  ©2013  </footer>
  166. </body>
  167. </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. 原生js常用方法

    原生JavaScript设置cookie值 function setCookie(name, value, Hours) { var d = new Date(); var offset = 8; v ...

  2. 《Git学习指南》学习笔记（一）

    第二章 入门 git的安装 在Linux下,git的安装很简单.以我的系统Deepin/Ubuntu为例,只需在终端敲入sudo apt-get install git即可.其他Linux发行版可尝试 ...

  3. 卡片游戏 （Throwing card away I,UVa10935)

    题目描述: 解题思路: 直接模拟 #include <iostream> using namespace std; ] ; int main(int argc, char *argv[]) ...

  4. 子序列 （All in All,UVa10340)

    题目描述:算法竞赛入门经典习题3-9 题目思路:循环匹配 //没有按照原题的输入输出 #include <stdio.h> #include <string.h> #defin ...

  5. gdb超级基础教程

    GDB超级基础教程 为什么叫超级基础呢,因为我被坑了一把.... 编译选项带 -g 就可以在可执行程序中加入调试信息,然后就可以使用gdb去查看了. 使用help命令就可以看到: (gdb) help ...

  6. 技本功丨知否知否，Redux源码竟如此意味深长（下集）

    上集回顾 Redux是如何使用的?首先再来回顾一下这个使用demo(谁让这段代码完整地展示了redux的使用) 如果有小伙伴对这段代码不是很理解的话,建议先去学习Redux的使用再来看这篇源码,这样更 ...

  7. Python3 小工具-UDP发现

    from scapy.all import * import optparse import threading import os def scan(ip): pkt=IP(dst=ip)/UDP( ...

  8. SpringCloud IDEA 教学 (一) Eureka的简介与服务注册中心的建立

    写在开头 SpringCloud进来成为业界排名靠前的微服务框架,最核心功能就是搭建微服务,并在此基础上衍生出一系列功能,如断路器(Hystrix).断路监控.管理配置.Zuul.OAuth2等功能. ...

  9. selenium中的三种等待方式（显示等待WebDriverWait()、隐式等待implicitly()、强制等待sleep()）---基于python

    我们在实际使用selenium或者appium时,等待下个等待定位的元素出现,特别是web端加载的过程,都需要用到等待,而等待方式的设置是保证脚本稳定有效运行的一个非常重要的手段,在selenium中 ...

  10. 感谢信——Alpha版

    作为Thunder团队的leader,当时担任组长,说实话,确实是头脑一热,可后来,在确定选题时,看着大家都有自己的想法,看着大家都那么踊跃,而我因为性格的原因,总是难以做决定,导致选题这件事就开了几 ...