CSS饼图效果：鼠标移入时饼图发生移动
饼图在网页中的运用极为普遍，比如简单的统计图表、进度指示器、定时器等
今天就来讲讲基于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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知