这个动画改编自光盘旋转，前几个步骤一样，最后一步不同。光盘旋转的最后一步是外层容器加个圆形的白色边框，多余部分隐藏，这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素，构成风车旋转的角。

1. 先看截图

2. 代码实现思路

2.1 首先还是定义四个元素，元素的中心为这四个元素组成的圆的圆心。这样定义的目的可以保证元素拼凑成一个正圆。

2.2 在单个元素的头尾各定义一个子元素，子元素旋转一定的角度，使其平行排列，中间刚好留一个正圆的位置。这里用了rotate和translate属性，没有用skew属性，是因为skew方法会使元素拉伸后变小。

2.3 将每个元素的子元素都定义不同的背景色，定义完成后，会形成8个不同的颜色排列，此时元素的形状已经产生了。需要注意的是，最后一个元素需要裁剪下，因为有可能会覆盖第一个元素。案例中第4，8个子元素是分开写的。

2.4 此时在圆心位置定义一个圆，圆的大小刚好覆盖中间的空隙位置。在1,2,3,4个子元素的顶部绝对定位一个元素，设置这个元素的边框，产生三角形的形状，形成风车旋转的角。同样的，在5,6,7,8个子元素的底部设置同样一个三角形的形状。

2.5 定义动画，并在外层容器上应用这个动画。这个动画的方式比较简单，就是旋转，直接使用rotate即可。

3. 源代码

 <!DOCTYPE html>

 <html>

 <head>

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

 <title>CSS3实现加载的动画效果6</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's css lib" />

 <meta name="description" content="CSS3" />

 <style>

 *{margin:0;padding:0;}

 body{background:#444;}

 /** 加载动画的静态样式 **/

 .m-load{position:relative;width:52px;height:52px;margin:100px auto;}

 .m-load .item{position:absolute;left:50%;top:0;width:20px;height:100%;margin-left:-10px;}

 .m-load .item:nth-child(2){-webkit-transform:rotate(45deg);}

 .m-load .item:nth-child(3){-webkit-transform:rotate(90deg);}

 .m-load .item:nth-child(4){-webkit-transform:rotate(135deg);clip:rect(-26px,18px,26px,-18px);}

 .m-load .item:nth-child(5){-webkit-transform:rotate(135deg);clip:rect(26px,37px,78px,2px);}

 .m-load .item span{position:absolute;left:0;width:18px;height:100%;}

 .m-load .first{bottom:52%;border-left:2px solid #fff;-webkit-transform-origin:left bottom;-webkit-transform:translate(100%,0) rotate(-45deg);}

 .m-load .last{top:52%;border-right:2px solid #fff;-webkit-transform-origin:right top;-webkit-transform:translate(-100%,0) rotate(-45deg);}

 .m-load .item span:before{content:'';position:absolute;left:-1px;width:0;height:0;overflow:hidden;}

 .m-load .first:before{top:-1px;border-top:30px solid #444;border-left:20px solid transparent;}

 .m-load .last:before{bottom:-1px;border-bottom:30px solid #444;border-right:20px solid transparent;}

 .m-load .item:nth-child(1) .first{background:#48ec53;}

 .m-load .item:nth-child(1) .last{background:#f75e5a;}

 .m-load .item:nth-child(2) .first{background:#a6ea4b;}

 .m-load .item:nth-child(2) .last{background:#724dee;}

 .m-load .item:nth-child(3) .first{background:#e8d84b;}

 .m-load .item:nth-child(3) .last{background:#44abec;}

 .m-load .item:nth-child(4) .first{background:#fdc103;}

 .m-load .item:nth-child(5) .last{background:#51ddeb;}

 .m-load .point{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:18px;background:#444;}

 /** 加载动画 **/

 @-webkit-keyframes load{

     100%{-webkit-transform:rotate(360deg);}

 }

 .m-load{-webkit-animation:load 1.8s linear infinite;}

 </style>

 </head>

 <body>

 <div class="m-load">

     <div class="item"><span class="first"></span><span class="last"></span></div>

     <div class="item"><span class="first"></span><span class="last"></span></div>

     <div class="item"><span class="first"></span><span class="last"></span></div>

     <div class="item"><span class="first"></span><span class="last"></span></div>

     <div class="item"><span class="first"></span><span class="last"></span></div>

     <div class="point"></div>

 </div>

 </body>

 </html>

CSS 实现加载动画之六-大风车的更多相关文章

  1. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  2. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  3. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  4. CSS 实现加载动画之四-圆点旋转

    圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 ...

  5. CSS 实现加载动画之三-钢琴按键

    今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定.给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了.废话不多说,直接上图. 1. 先看gif图 2. 代码实现思路 2 ...

  6. CSS 实现加载动画之二-圆环旋转

    上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转.与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加 ...

  7. CSS 实现加载动画之一-菊花旋转

    最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来 ...

  8. 【动画消消乐】HTML+CSS 自定义加载动画 061

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  9. 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

随机推荐

  1. iOS OC内联函数 inline的详解

    inline 在iOS中的一些框架中,static inline是经常出现的关键字组合. static自不用多说,表示在当前文件中应用,如 static A, 在其它文件中也可以出现static A. ...

  2. 建立JDBC的环境配置和相关下载（Mac）

    首先已经安装好XMAPP和Workbench. 1.打开MySQL,然后打开Workbench: 然后我们需要下载MySQL的JDBC驱动. 1.进入MySQL官网:http://dev.mysql. ...

  3. mysql 命令行

    drop database mustang; create database mustang; show databases; use database mustang; show tables; s ...

  4. HttpClient使用方法（包括POST文件）

    最近在做跨系统的数据交互业务,从.Net的系统提交数据到Java的系统. 简单的表单Get.POST都没问题,但是有个功能是要提交普通文本和文件,试了好多都有问题,最后用HttpClient小折腾了一 ...

  5. 迷宫问题求解之“A*搜索”（二）

    摘要:在迷宫问题求解之"穷举+回溯"(一)这篇文章中采用"穷举+回溯"的思想,虽然能从迷宫的入口到出口找出一条简单路径,但是找出来的不是最优路径.因此本文采用A ...

  6. ubuntu创建、删除文件及文件夹方法

    mkdir 目录名         => 创建一个目录 rmdir 空目录名      => 删除一个空目录 rm 文件名 文件名   => 删除一个文件或多个文件 rm –rf 非 ...

  7. 枚举Enumerations

    枚举,类似于数据库中的表. 难点:实例值和原始值. import Foundation enum Sex{ case Male(Int,Int) case Female(String) } var b ...

  8. Azure 自动化里添加ResourceManager模块

    最近想尝试通过Azure里的自动化功能来控制VM的定时开关机,找到网上的一篇文章,  按照文章操作到"Import Azure Resource manager module"的第 ...

  9. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  10. 记一次linux服务器问题处理过程

    本周二的时候,涛哥找我,说明了一件事,在安装ganglia的时候,发生的一个问题. 在一台suse 10 sp1的服务器上,安装ganglia的一个依赖包,libconfuse.rpm,安装完成之后, ...