【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);