CSS饼图效果：鼠标移入时饼图发生移动

时间：5年前阅读：6545

饼图在网页中的运用极为普遍，比如简单的统计图表、进度指示器、定时器等

今天就来讲讲基于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,我们将及时处理。

微信扫码关注

更新实时通知

CSS饼图效果：鼠标移入时饼图发生移动

网友评论