【css3技巧(三)】圆环进度条动画，圆形镂空，静态缺口圆环，优惠券缺口。

一、静态缺口圆环，可多色。

效果图：

主要代码：

background: conic-gradient(#B9C1F8 0% 25%,#fff 26% 50%,#5979EF 51%,#B9C1F8 100%);

原理:

哈哈，css3锥形渐变写个圆形背景，然后在里面定位一个小点的子级白色背景的元圆。缺口部分为白色渐变。【伪实现】

二、圆形镂空缺口，或者半圆镂空。

效果图：

主要代码：

background-image: radial-gradient(100px at top center, transparent 50%, #fff 50%);

原理：

100px：直径。at：是镂空位置。#fff：背景色。css3,径向渐变。

三、圆环进度动画。

效果图：

制作的gif贼丑，哈哈~

主要代码：

<!--小程序的标签，html-->
<view class="circleProgress_wrapper">
		  <view class="wrapper right">
			 <view class="circleProgress rightcircle"></view>
		  </view>
		<view class="wrapper left">
			 <view class="circleProgress leftcircle"></view>
		 </view>
 </view>

// css，尺寸比较小啊，自己调吧。
// 圆环的范围大小
.circleProgress_wrapper{
            width: 80px;
            height: 80px;
            top: 50%;
			left: 50%;
            position: absolute;
			transform: translate(-50%,-50%);
}
// 左右两个矩形大小，高度跟父级一样，宽度一半
   .wrapper{
            width: 40px;
            height: 80px;
            position: absolute;
            top:0;
            overflow: hidden;
     }
       .right{
            right:0;
        }
        .left{
            left:0;
        }
  //父级正方形中的，底色圆。
        .circleProgress{
            width: 80px;
            height: 80px;
            border:6px solid #FBFBFB;
            border-radius: 50%;
            position: absolute;
            top:0;
            -webkit-transform: rotate(45deg);
        }
      //右边
        .rightcircle{
            border-top:6px solid #FF7400;
            border-right:6px solid #FF7400;
            right:0;
            -webkit-animation: circleProgressLoad_right 2s linear infinite;
        }
        //左边
        .leftcircle{
            border-bottom:6px solid #FF7400;
            border-left:6px solid #FF7400;
            left:0;
            -webkit-animation: circleProgressLoad_left 2s linear infinite;
        }
        //动画
        @-webkit-keyframes circleProgressLoad_right{
            0%{
               
                -webkit-transform: rotate(-135deg);
            }
            50%,100%{
                
                -webkit-transform: rotate(45deg);
            }
        }
        @-webkit-keyframes circleProgressLoad_left{
            0%,50%{
             
                -webkit-transform: rotate(-135deg);
            }
            100%{
               
                -webkit-transform: rotate(45deg);
            }
        }

四、优惠券，邮票券缺口。

效果图：

原理：css3，background-image: radial-gradient
at后面是位置，第一个颜色是原点颜色，第二个是缺口颜色，第三个是其余背景透明。

代码：

background-image: radial-gradient(circle at top right, #e9f7f8, #e9f7f8 10px, transparent 11upx),
				radial-gradient(circle at top left, #e9f7f8, #e9f7f8 10px, transparent 11upx);