<!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. Soliworks 2016建模细节总结（1）

    Soliworks 2016建模小细节总结(1) 1.Solidworks 2016三维建模的时候,如果想要在一个视图里面呈现出四个视图(包括三个独立的视图以及三维结构的实体模型图),可以直接按鼠标会 ...

  2. PHP正则相关

    描述字符串排列模式的一种自定义语法规则 如果可以使用字符串函数处理的任务 就不要使用正则 正则表达式 就是通过构建具有特定规则的模式,与输入的字符信息比较 在进行 分割 匹配 查找 替换 等工作   ...

  3. 人脸识别 ArcFace Demo [Windows]

    Arcsoft ArcfaceDemo for Windows, VS2013 C++   使用虹软技术开发完成 使用步骤: 1.下载SDK包,32位Windows平台将五个SDK包里lib中的文件到 ...

  4. 名人问题 算法解析与Python 实现 O(n) 复杂度 （以Leetcode 277. Find the Celebrity为例）

    1. 题目描述 Problem Description Leetcode 277. Find the Celebrity Suppose you are at a party with n peopl ...

  5. 深入理解eos账户体系 active和action

    在eos中,账户是一个非常重要的概念. 账户分为两部分组成 一种是active 一种是action. 智能合约本质上来讲就是一个action加上一个回馈脚本程序.任何智能合约都有这俩个部分组成. 那么 ...

  6. [leetcode-667-Beautiful Arrangement II]

    Given two integers n and k, you need to construct a list which contains n different positive integer ...

  7. Hybrid APP基础篇(五)->JSBridge实现示例

    说明 JSBridge实现示例 目录 前言 参考来源 楔子 JS实现部分 说明 实现 Android实现部分 说明 JSBridge类 实现 Callback类 实现 Webview容器关键代码 实现 ...

  8. 20170413B端业务访问故障排查思路

    现象: 1.全国用户电视端页面无法显示,刷不出版面. 2.后端服务无法打开,报错,504,502   显示服务器端业务故障超时. 3.其他业务也出现缓慢情况,并不严重. 排查: 1.系统服务排查,常规 ...

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

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

  10. "Hello world!"团队第一次会议

    今天是我们"Hello world!"团队第一次召开会议,今天的会议可能没有那么正式,但是我们一起确立了选题——基于WEB的售票系统.博客内容是: 1.会议时间 2.会议成员 3. ...