css-边框流水线

效果图:
css-边框流水线_第1张图片

代码:



	
		
		
		
		
	
	
		

效果图

css-边框流水线_第2张图片
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			 body{
				 background-color: black;
			 }
			.container{
				width: 100vw;
				height: 100vh;
				backdrop-filter: blur(50px);
				display: flex;
				justify-content: center;
			}
			.box{
				z-index: 1;
				width: 250px;
				box-sizing: border-box;
				height: 250px;
				margin: 50px;
				background-color: red;
				position: relative;
				overflow: hidden;
				-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
				
			}
			:root{
				--wi:5px;
				--hi:5px;
			}
			.rect_out{
				z-index: 3;
				position: absolute;
				width: calc(100% - var(--wi));
				height: calc(100% - var(--hi));
				left: calc(var(--wi)/2);
				top: calc(var(--hi)/2);
				background-color: green;
			}
			.rect_in{
				z-index: 2;
				width: 100%;
				height: 100%;
				background-color: yellow;
				position: absolute;
				left: -50%;
				top: -50%;
				border-radius: 50%;
				transform-origin: right bottom;
			    animation: rotate 5s linear infinite;
			}
			@keyframes rotate{
				from{
					transform: rotate(0deg);
				}
				
				to{
					transform: rotate(360deg);
				}
			}
			
		</style>
		
		<div class="container">
			<div class="box">
				<div class="rect_out"></div>
				<div class="rect_in"></div>
			</div>
		</div>
	</body>
</html>

你可能感兴趣的:(css,前端,html,1024程序员节)