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

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. 关于ubuntu下sublime text 3 的安装和中文配置问题

    一.sublime text 3 在ubuntu 16.04下的安装过程 1)首先下载sublime text 3 的tar包 $ wget https://download.sublimetext. ...

  2. 手机电脑Mac地址修改方法

    1.什么是Mac地址? MAC(Media Access Control或者Medium Access Control)地址,意译为媒体访问控制,或称为物理地址.硬件地址,用来定义网络设备的位置.在O ...

  3. php简单框架的应用实例

    <html> <frameset rows="50%,50%"> <frame src="/Test/header.php"> ...

  4. Android获取屏幕宽度高度

    方法一: WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERVICE); int width = ...

  5. PCA、ZCA白化

    白化是一种重要的预处理过程,其目的就是降低输入数据的冗余性,使得经过白化处理的输入数据具有如下性质:(i)特征之间相关性较低:(ii)所有特征具有相同的方差. 白化又分为PCA白化和ZCA白化,在数据 ...

  6. Linux下安装jetty服务器

    jetty和我们通常使用的tomcat一样,是一个开源的servlet容器,特点是轻量易部署,一方面jetty可以作为web容器使用,另一方面也是最一般的方式是jetty以一组jar包的形式发布,所以 ...

  7. 自定义TextView 调用ttf格式字体

    自定义TextView 调用ttf格式字体 1.<strong>将ttf格式文件存放在assets/fonts/下</strong> 注:PC系统字体存放在C:\Windows ...

  8. axure rp8.0 序列号，亲测可以用

    转载自:https://zhidao.baidu.com/question/428326076480233092.html aaa 2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3 ...

  9. VMWare虚拟机实例拷贝到另一台服务器后出现Error in the RPC receive loop: RpcIn: Unable to send.错误的解决

    把一个VMWare虚拟机实例拷贝到另一台服务器后,在事件查看器中的应用程序日志中不断出现Error in the RPC receive loop: RpcIn: Unable to send.错误, ...

  10. App开发流程之加密工具类

    科技优家 2016-09-08 18:10 从这篇记录开始,记录的都算是干货了,都是一些编程日常的积累. 我建议先将基础的工具加入项目,后续的开发效率会呈指数增长.如果在专注功能开发过程中,才发现缺少 ...