.coutdown-animate {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    opacity: 0.3;
    &:before {
      content: "";
      display: block;
      margin-left: 50%;
      height: 100%;
      background-color: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 50px 50px 0;
      transform-origin: left;
    }
    &.animate {
      background: #000;
      background-image: linear-gradient(to right, transparent 50%, #9acd32 0);
      &:before{
        animation: spin 1.5s linear infinite, bg 3s step-end infinite;
      }
    }
  }
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes bg {
  50% {
    background: #9acd32;
  }
}
 

CSS3扇形进度效果的更多相关文章

  1. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  2. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  3. 功能源代码(扇形进度)及Delegate运用在开放事件中、UINavigationController的封装

    1:扇形进度视图及运用 首先先创建扇形的视图,传入进度值 #import <UIKit/UIKit.h> @interface LHProgressView : UIView @prope ...

  4. CSS扇形展开效果

    知识点预备: [1]CSS3中特别重要的transform中的rotate(),现在transform可以将元素进行2D和3D变形. 2D transform常用的transform-function ...

  5. 小tip: 使用SVG寥寥数行实现圆环loading进度效果

    二.正文 设计师设计了一个图片上传圆环loading进度效果.如下截图: 首先,CSS3是可以实现的,以前写过一篇转大饼的文章:“CSS3实现鸡蛋饼饼状图loading等待转转转”.原理跟这个一模一样 ...

  6. 小tip: 使用SVG寥寥数行实现圆环loading进度效果(转载)

    设计师设计了一个图片上传圆环loading进度效果.如下截图: 首先,CSS3是可以实现的,以前写过一篇转大饼的文章:“CSS3实现鸡蛋饼饼状图loading等待转转转”.原理跟这个一模一样,两个半区 ...

  7. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  8. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  9. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. jQuery的zTree插件

    写在前面 jQuery的 zTree插件 关键代码 <%@ page language="java" contentType="text/html; charset ...

  2. 认真分析mmap:是什么 为什么 怎么用(转)

    阅读目录 mmap基础概念 mmap内存映射原理 mmap和常规文件操作的区别 mmap优点总结 mmap相关函数 mmap使用细节 回到顶部 mmap基础概念 mmap是一种内存映射文件的方法,即将 ...

  3. Mysql模糊查询like提速优化

    LOCATE('substr',str,pos)方法 SELECT LOCATE('xbar',`foobar`); ###返回0 SELECT LOCATE('bar',`foobarbar`); ...

  4. JS项目快速压缩(windows平台)

    问题 当下JS项目都有node_modules,从而项目文件多,容量大. 如何快速压缩一个JS项目? 方法 首先对JS项目安装生产环境的依赖npm install --production. 这时不要 ...

  5. PHP $$符号的作用与使用方法

    php中$$符号的定义与作用 在PHP中单个美元符号变量($str),表示一个名为str的普通变量,它可以存储字符串.整数.数组.布尔等任何类型的值. 双美元符号的变量($$str):表示一个可变变量 ...

  6. 将pip源设置国内源

    windows (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %appdata% (3)在这里面新建一个文件夹 pip (4)在pip文件夹里面新建一个文件叫做 pip.ini , ...

  7. 使用epoll实现一个udp server && client

    udp server #!/usr/bin/env python #-*- coding:utf-8 -*- import socket import select import Queue #创建s ...

  8. Windows下的免安装版MySQL配置

    原文地址:https://blog.csdn.net/qq_40277973/article/details/81517479 近日在新的电脑上安装MySQL遇到一些小问题,在此做分享,也作为日后备用 ...

  9. ThreadLocal源代码1

    public class ThreadLocalTrxt { static ThreadLocal<Object> x1 = new ThreadLocal<Object>() ...

  10. GPU机器安装paddle

    安装基础包 yum -y install epel-release yum -y install kernel-devel yum -y install dkms 编辑文件 /etc/default/ ...