项目展示

用到的技术

html：div中写了class元素。
css:flex布局，类选择器，animation动画，@keyframes定义下面的两个图形，并让其运动。整体的思路如下：
首先画出了两条线，对这两条线进行了弯曲的操作，这就变成了一个大的弧线，单是弧线看起来也是比较单调的，那么就选择了让这个弧线进行运动。并且在后面加上了倒影，让整个图的部分看起来的效果更加的例题

html部分

css部分

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="container">
			<div class="curly">
			</div>
		</div>
		
	</body>
</html>

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	/* flex布局 */
	display: flex;
	/* 使写出的元素进行居中处理 */
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: black;
}
.container{
	/* 倒影功能 ，i am lonly but i am not alone*/
	-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, .5));
	
}
.curly{
	/* 绘制圆弧的倒影 */
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border:30px solid transparent;
	/* 定一下下边和右边的色 */
	/* 两个圆弧的颜色 */
	border-bottom-color: #fff ;
	border-right-color: #fff ;
	/* ease-in-out:减速,淡出 */
	
	animation: move 5s ease-in-out infinite alternate;
}

/* 下面定义两个动画 */
@keyframes move {
	/* rotate()方法可以旋转当前的绘图 */
	0%{
		transition: rotate(0) ;
	}
	100%{
		transform: rotate(90deg);
	}
}
@keyframes move-reverse{
	0%{
		transform: rotate(0);
	}100%{
		
	}
}

以上就是整个代码的思路，css的倒影的部分，重点的知识点，在代码中都有讲解~

孤独的圆弧倒影-css制作的倒影

项目展示

用到的技术

html部分

css部分