写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：

1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。

2.做出另一组div更换背景色即可实现反方向的旋转。

代码如下：

<!DOCTYPE html>

<html>

<head>

    <style>

        .outer{

            position:relative;

            left:100px;

            top:100px;

            height:100px;

            width:100px;

            }

        .cont1,.cont2{

            position:absolute;

            height:100%;

            width:100%;

            border-radius:50px;

            overflow: hidden;

            }

        .cont1{

            background:red;

            opacity:1;

            animation:hide 4s steps(1,end) infinite;

            }

        .cont2{

            background:blue;

            opacity:0;

            animation:show 4s steps(1,end) infinite;

            }

        .rotateDiv{

            position:absolute;

            left:0;

            top:0;

            border-radius:50px 0 0 50px;

            background:blue;

            height:100%;

            width:50%;

            transform-origin:center right;

            animation:rotate 2s infinite linear;

/*            transition:transform 2s;*/

            }

        .right{

            position:absolute;

            left:50px;

            top:0;

            border-radius:0 50px 50px 0;

            background:blue;

            height:100%;

            width:50%;

            opacity:1;

            animation: hide 2s steps(1,end) infinite;

            }

        .left{

            position:absolute;

            left:0;

            top:0;

            border-radius:50px 0 0 50px;

            background:red;

            height:100%;

            width:50%;

            opacity:0;

            animation: show 2s steps(1,end) infinite;

            }

/*        .left-rotate:hover{

            transform:rotate(180);*/

        .cont2 .rotateDiv, .cont2 .right{

            background:red;

            }

        .cont2 .left{

            background:blue;

            }

        /*css动画*/

        @keyframes rotate

            {

                0%   {transform:rotate(0deg);}

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

            }

        @keyframes show

            {

                0%   {opacity:0;}

                50%,100% {opacity:1;}

            }

        @keyframes hide

            {

                0%   {opacity:1;}

                50%,100% {opacity:0;}

            }

    </style>

</head>

<body>

//css3动画

  <div class="outer">

    <div class="cont1">

        <div class="rotateDiv"></div>

        <div class="right"></div>

         <div class="left"></div>

    </div>
<!--反方向的旋转-->

    <div class="cont2">

        <div class="rotateDiv"></div>

        <div class="right"></div>

        <div class="left"></div>

    </div>

   </div>

</body>

</html>

其中用到了一个css3,动画的step(1,end)，不太理解。。。

css3实现圆形逐渐减少动画的更多相关文章

  1. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  4. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  5. 重新想，重新看——CSS3变形，过渡与动画①

    学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...

  6. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

  7. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  8. css3很美的蟠桃动画

    查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: ...

  9. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

随机推荐

  1. REDHAT一总复习1 输出重定向及head tail的用法

    1.使用bash命令,在server机上完成以下任务.(考点是:head  tail的使用) .显示/usr/bin/clean-binary-files文件的前12行,并将其输出到/home/stu ...

  2. jcFeather Maya 羽毛插件

    jcFeather 2.8.6 插件持续更新地址为:http://www.jerrykon.com/jcFeather.html 和 http://www.creativecrash.com/maya ...

  3. Thrift的TBinaryProtocol二进制协议分析

    先上张图,说明一下thrift的二进制协议是什么东东. 报文格式编码: bool类型: 一个字节的类型,两个字节的字段编号,一个字节的值(true:1,false:0). Byte类型: 一个字节的类 ...

  4. MySQL 备份与恢复

    一.备份/恢复策略 考虑因素有: (A) 表的存储引擎是否事务性的,在数据一致性方面不太一样. (B) 确定是全备份还是增量备份, (C) 考虑采取复制的方法做异地备份,复制不能代替备份 (D) 定期 ...

  5. C#发送邮件异常：根据验证过程,远程证书无效

    今天在做发送邮件功能时,开始用qq邮箱和163邮箱都可以正常发送,后再改用我公司的邮箱和smtp时竟然报错了. 异常提示-----"根据验证过程,远程证书无效",后来通过查询资料解 ...

  6. Libvlc API 简单说明 [转]

    Libvlc API 简单说明 原文来自http://www.xuebuyuan.com/1519616.html libvlc_instance_t* libvlc_new(int argc, co ...

  7. Menu与ActionBar的爱恨情仇

    最近在开发一款音乐播放器,在开发过程中遇到了一点小麻烦,通过android API搞清楚了Menu与ActionBar的爱恨情仇,写了个小Demo祭奠一下那些年我们陷进去的坑,有不对的地方请大神们批评 ...

  8. sql奇进偶舍函数

     create   function   sslr(@num   numeric(20,10),@i   int) --@i保留的小数位 --@num传入的数据 returns   varchar(2 ...

  9. maven学习（上）- 基本入门用法

    一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...

  10. JSP复习整理（三）基本语法续

    查看注册后的信息: TestBean.java package com.hai.xaio.cn; public class TestBean { public String userName; pub ...