<!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. Tensorflow学习第1课——从本地加载MNIST以及FashionMNIST数据

    很多Tensorflow第一课的教程都是使用MNIST或者FashionMNIST数据集作为示例数据集,但是其给的例程基本都是从网络上用load_data函数直接加载,该函数封装程度比较高,如果网络出 ...

  2. LeetCode - 136. Single Number - ( C++ ) - 解题报告 - 位运算思路 xor

    1.题目大意 Given an array of integers, every element appears twice except for one. Find that single one. ...

  3. solidity 十六进制字符串转十六进制bytes

    pragma solidity ^0.4.16; contract Metadata { // 十六进制字符串转换成bytes function hexStr2bytes(string data)re ...

  4. POJ 1113 Wall(计算几何の凸包）

    Description Once upon a time there was a greedy King who ordered his chief Architect to build a wall ...

  5. 关于智能指针类型shared_ptr的计数问题

    一.关键 每个shared_ptr所指向的对象都有一个引用计数,它记录了有多少个shared_ptr指向自己 shared_ptr的析构函数:递减它所指向的对象的引用计数,如果引用计数变为0,就会销毁 ...

  6. 欢迎来怼--第七次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员: 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/19 17:05~17:17,总计12min. 地 ...

  7. Thunder团队Beta周贡献分分配结果

    小组名称:Thunder 项目名称:爱阅app 组长:王航 成员:李传康.翟宇豪.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞 分配规则 规则1:基础分,拿出总分的20%(8分)进行均分,剩下的80%(32分) ...

  8. poj 3009 (深搜求最短路)

    题目大意就是求在特定规则下的最短路,这个规则包含了消除障碍的操作.用BFS感觉选择消除障碍的时候不同路径会有影响,用DFS比较方便状态的还原(虽然效率比较低),因此这道题目采用DFS来写. 写的第一次 ...

  9. Calculator Part Ⅰ

    GitHub/object-oriented The title of the work 关于这次的作业,一开始我是觉得不难的,毕竟学长在已经提供了足够多的提示,实现步骤.需要那些方面的知识等等.但是 ...

  10. iOS开发开辟线程总结--NSThread

    1.简介: 1.1 iOS有三种多线程编程的技术,分别是: 1..NSThread 2.Cocoa NSOperation (iOS多线程编程之NSOperation和NSOperationQueue ...