目 录CONTENT

文章目录

雷达图案例

Administrator
2022-02-23 / 0 评论 / 9 点赞 / 5904 阅读 / 2913 字

雷达图案例

  • 案例名称:雷达案例
  • 案例人员:杨标
  • 案例平台:HTML+CSS
  • 完成时间:2022年2月16日

效果图

image20220216103208884.png

案例说明

本案例指在对学生的CSS渐变做一个综合练习,同时对基本的布局也做一个练习回顾

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>雷达图</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}

			html,
			body {
				width: 100%;
				height: 100%;
			}

			body {
				background-color: black;
				background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0) 0%, 2%, rgba(24, 138, 65, 0.3) 2% 2.1%),
					repeating-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, 3%, rgba(24, 138, 65, 0.3) 3% 3.1%);
			}

			.box {
				zoom: 2;
				width: 400px;
				height: 400px;
				border: 1px solid #20ff4d;
				position: fixed;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				border-radius: 50%;
				background-image: radial-gradient(rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%),
					repeating-radial-gradient(transparent 0% 18%, rgba(32, 255, 77, 0.8) 18% 18.4%),
					linear-gradient(to top, transparent 0% 49.5%, rgba(32, 255, 77, 0.8) 49.9% 50.1%, transparent 50.1% 100%),
					linear-gradient(to right, transparent 0% 49.5%, rgba(32, 255, 77, 0.8) 49.9% 50.1%, transparent 50.1% 100%);
			}
			.small-box{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-image: conic-gradient(transparent 0% 85%,rgba(32, 255, 77, 0.8));
				animation: small-box-ani 10s linear infinite;
			}
			@keyframes small-box-ani{
				to{
					transform: rotateZ(1turn);
				}
			}
			.small-circle{
				position: absolute;
				width: 1px;
				height: 1px;
				background-color: rgba(32, 255, 77, 0.8);
				box-shadow: 0px 0px 15px 10px rgba(32, 255, 77, 1);
				border-radius: 50%;
				animation: ani2 10s linear infinite;
			}
			.s1{
				right: 180px;
				bottom: 20px;
				animation-delay: 1s;
			}
			.s2{
				right: 100px;
				bottom: 50px;
			}
			.s3{
				right: 150px;
				bottom: 120px;
			}
			@keyframes ani2{
				0%,41%{
					opacity: 0;
					transform: scale(0.8);
				}
				50%,90%{
					opacity: 1;
					transform: scale(1);
				}
				100%{
					opacity: 0;
					transform: scale(0.8);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="small-box"></div>
			<div class="small-circle s1"></div>
			<div class="small-circle s2"></div>
			<div class="small-circle s3"></div>
		</div>
	</body>
</html>
9

评论区