饼图在网页中的运用极为普遍，比如简单的统计图表、进度指示器、定时器等
今天就来讲讲基于transform的CSS解决方案
实现原理是使用一个元素作为容器，其他部分由伪元素，变形属性和CSS渐变来实现。
如何实现扇形呢？有一种思路就是将圆形分为左右两半，通过伪元素覆盖其中一半，再将伪元素通过旋转来决定露出多大的扇区。
接下来就是思考如何快速的制作多个不同比率的静态饼图了。解决方案是利用CSS动画中的延迟时间animation-delay属性。如果将这个值设置为负值，那么动画就会直接跳转到动画中的某一时刻。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@keyframes spin{
to{transform: rotate(.5turn);}
}
@keyframes bg{50%{background:#655;}}
#tt{
width: 100px;height: 100px;
position:relative;
background-color: yellowgreen;
border-radius: 50%;
background-image: linear-gradient(to right, transparent 50%,#655 0);
}
#tt:before{
content:'';
position:absolute;
top: 0;left: 50%;
width: 50%;height: 100%;
border-radius: 0 100% 100% 0 /50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,bg 6s step-end infinite;
animation-play-state: paused;
}
#tt:hover:before{
animation-play-state: running;
}
</style>
</head>
<body>
<div id="tt"></div>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8046.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知