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

骑猪看日落 2023-06-12 08:41 3阅读 0赞

### 文章目录 ###

*   *   *   *   *  一、静态缺口圆环，可多色。
                 *  二、圆形镂空缺口，或者半圆镂空。
                 *  三、圆环进度动画。
                 *  四、优惠券，邮票券缺口。

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

效果图：  
![多色缺口圆环][20191101104633304.png]  
主要代码：

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

原理:

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

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

效果图：  
![圆形镂空][2019110110550117.png]

主要代码：

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

原理：

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

##### 三、圆环进度动画。 #####

效果图：  
![在这里插入图片描述][20191101111306946.gif]

> 制作的gif贼丑，哈哈~

主要代码：

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

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

效果图：  
![优惠券][20191107162017866.png]

> 原理：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);

[20191101104633304.png]: /images/20230531/3ad62d375073444583ddda7d3b3b7672.png
[2019110110550117.png]: /images/20230531/3ee9152e90624eb2b1d5b0bd777769dc.png
[20191101111306946.gif]: /images/20230531/f72f8cac2fe54514bc472b42336bdd7e.png
[20191107162017866.png]: /images/20230531/8cf446b819d948468eb573358dd2ec51.png