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