<!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. 【转】Unity 使用xLua遇到的坑

    在我们使用xLua作为Unity中lua集成的解决方案时,遇到了一个问题,就是当我们使用在lua中把UI中的某个控件绑定相应的事件(如按钮的onClick事件),xLua绑定这个事件是用委托实现的,具 ...

  2. jmeter链接数据库问题汇总

    1.最新驱动下载: 驱动版本与mysql服务不兼容也是会报错的 下载地址:https://dev.mysql.com/downloads/connector/j/ 打开页面一直拉到页面底部,此处选择P ...

  3. 百度翻译api 实现简易微信翻译小程序

    介绍 口袋翻译 口袋翻译 微信小程序 翻译功能 含7类语言的相互翻译 包含最近10条的翻译历史回溯功能 微信搜索:简e翻译 功能展示   使用百度翻译api需要申请 appid 与 key 并在 ap ...

  4. 从SDN鼻祖Nicira到VMware NSX 网络虚拟化平台的简单探讨

    以前的大二层技术,一般是在物理网络底层使用IS-IS路由技术,再在此基础之上,实现数据中心网络的二层扩展,如公有的Trill.SPB技术和Cisco私有的OTV.Fabricpath技术:前沿一些的网 ...

  5. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  6. 蓝牙ble数据转语音实现Android AudioRecord方法推荐

    蓝牙ble数据转语音实现Android AudioRecord方法推荐 教程  欢迎走进zozo的学习之旅. 概述 蓝牙BLE又称bluetooth smart,主打的是低功耗和快速链接,所以在支持的 ...

  7. TCP系列15—重传—5、Linux中RTO的计算

    之前我们介绍的都是协议中给出的RTO计算方法,下面我们看一下linux实现中RTO的计算方法.在linux中维护了srtt.mdev.mdev_max.rttvar.rtt_seq几个状态变量用来计算 ...

  8. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  9. LoadRunner数据库监控指标

    SQL Server 注:以下指标取自SQL Server自身提供的性能计数器. 指标名称 指标描述 指标范围 指标单位 1．SQL Server中访问方法(Access Methods)对象包含的性 ...

  10. [CLR via C#]基元类型

    一.什么是基元类型 某些数据类型如此常用,以至于许多编译器允许代码以简化的语法来操纵它们.例如,可以使用以下语法来分配一个整数: System.Int32 a = new System.Int32() ...