conic-gradient锥形渐变实际应用

最新推荐文章于 2024-05-01 12:03:21 发布

兔子敲代码

最新推荐文章于 2024-05-01 12:03:21 发布

阅读量140

点赞数

文章标签： css html css3 js animation

本文链接：https://blog.csdn.net/qq_38499671/article/details/109238079

版权

1.饼状图实现：

html:

<div class="rign"></div>

css:

 .rign{width: 200px;height: 200px;border-radius: 200px;background: conic-gradient(#3ebd3e 0, #3ebd3e 33.33%, #ff9800 33.33%, #ff9800 66.66%, #03a9f4 66.66%, #03a9f4 100%);}

2.加载中动画实现

html:

<div class="load"></div>

css:

.load{width: 200px;height: 200px;border-radius: 200px;position: relative;background: conic-gradient(rgba(255,152,0,1) 0, rgba(255,152,0,0) 100%);animation: run ease-out 1s infinite}
@keyframes run{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.load:after{content: "";text-align: center;line-height:160px;font-size: 20px;width: 160px;height: 160px;background: #fff;border-radius: 200px;position: absolute;top: 20px;left: 20px;z-index: 2;}