conic-gradient锥形渐变实际应用
七娃博客255 次
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;}
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:conic-gradient锥形渐变实际应用 - Qui-Note
评论 | 0 条评论