css3里面扇形的创建

最新推荐文章于 2024-12-16 23:12:55 发布

羽沢31

最新推荐文章于 2024-12-16 23:12:55 发布

阅读量328

点赞数 6

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/2403_87566238/article/details/144182623

版权

方法1：使用conic-gradient:值.........;(圆锥渐变)

值的使用和径向渐变一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*一、使用conic函数,该方法创建*/
			#d1{
				width: 200px;
				height: 200px;
				background-color: antiquewhite;
				margin: 50px auto;
				border-radius: 50%;
				background-image: conic-gradient(red 0deg,red 45deg,antiquewhite 45deg,antiquewhite 360deg);
			}
			
		</style>
	</head>
	<body>
		<div id="d1"></div>
		
	</body>
</html>

结果如下：

布吉岛为啥该方法创建的扇形在使用动画的时候不能达到过渡的效果，不太建议使用，静态图可以

方法2：使用伪元素旋转遮挡创建：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#d2{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background-color: antiquewhite;
				margin: 50px auto;
				background-image: linear-gradient(90deg,pink 50%,skyblue 50%);
			}
			#d2::before{
				content:"";
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 50%;
				background-image: linear-gradient(90deg,transparent 50%,pink 50%);
				transform: rotate(45deg);
			}
			
		</style>
	</head>
	<body>
		
		<div id="d2"></div>
		
	</body>
</html>

流程如下：

1.先使用线性渐变为元素创建一个一半世界上最美丽的颜色-pink，一半天蓝色的圆，如图：

2.使用伪元素创建一个左边一半是透明，右边一半是pink的圆，会使圆全粉,如图：

3.接着使伪元素旋转一下就出现扇形了（rotate(45deg)），如图：

使用方法二可以创建一个使用的样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#d3{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				margin: 50px auto;
				border-radius: 50%;
				background-image: linear-gradient(90deg,pink 50%,skyblue 50%);
				position: relative;
			}
			#d3::before{
				content: "";
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				/* background-color: black; */
				border-radius: 50%;
				background-image: linear-gradient(90deg,transparent 50%,pink 50%);
				animation: rotate_san 4s linear infinite ,color_change 8s linear infinite;
			
			}
			@keyframes rotate_san{
				from{transform: rotate(0);}
				to{transform: rotate(180deg);}
			}
			@keyframes color_change{
				to{background-image: linear-gradient(90deg,transparent 50%,skyblue 50%);}
			}
		</style>
	</head>
	<body>
		
		<div id="d3"></div>
	</body>
</html>

结果如下：