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

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. 手机通过数据线连接电脑后，找不到设备--Android Studio

    手机通过数据线连接电脑后,找不到可用的设备.允许USB调试,,因为小米手机还要设置USB开发者模式. 1.打开设置/关于手机 四次点击“MIUI版本”如图: 2.返回上一页打开更多设置 看到开发者选项 ...

  2. 【Android Studio】android Internal HTTP server disabled 解决

    报错:Cannot start internal HTTP server. Git integration, JavaScript debugger and LiveEdit may operate ...

  3. JavaScript的==和===运算符

    JavaScript提供两个相等运算符:==和 ===.      简单说,它们的区别是相等运算符( ==)比较两个值是否相等,严格相等运算符( ===)比较它们是否为“同一个值”.如果两个值不是同一 ...

  4. Sql Server函数全解<一>字符串函数

    阅读目录 1.ASCII()函数 2.CHAR()函数 3.LEFT()函数 4.RIGHT()函数 5.LTRIM()函数 6.RTRIM()函数 7.STR()函数 8.字符串逆序的函数REVER ...

  5. httpie 取代 curl

    接口测试有人喜欢postman(for windows or mac) 如果长期用linux工作,可能更喜欢命令的方式,比如curl最近深入了解了下django-rest-framwork,他们推荐了 ...

  6. Docker - Install docker on CentOS

    1. 准备 由于 Dokcer 需要 64bit OS, 版本号 3.10 或者更新的版本.所以,需要我们先确认我们的 CentOS 系统 $ uname -r output :: 3.10.0-22 ...

  7. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  8. kill命令

    *杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通 ...

  9. Debian 8.3 中文字体安装

    有了这个字体,对于日常工作和生活而言已经非常足够了.如果你还需要更多中文字体的话,推荐可以安装“文泉驿正黑”,“文泉驿点阵宋体”等.文泉驿的安装包已经进入了 Debian/Ubuntu,直接安装 tt ...

  10. Python3.5在Windows 7下连接ORACLE数据库

    1.首先需要安装好oracle数据库,本机适用plsql连接数据库正常,记录下数据库名称 2.安装cx_oracle模块 pip install cx_Oracle 3.python中引入模块 imp ...