当前位置：网站首页>线条动画

线条动画

2022-06-28 05:21:00 【辕小白】 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>线条动画</title>
  <style>
  	html,body{	
		margin: 0;
		width: 100%;
		height: 100%;
		background-color: #0f222b; 
	}
	.box,.box::before,.box:after{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.box{
		width: 200px;
		height: 200px;
		background: url(../images/er.jpg) no-repeat 50%/90%;
		border: 2px solid green;
		margin: auto;
	}
	.box::before, .box::after{
		content:'';
		margin: -5%;
		box-shadow: inset 0 0 0 2px #69ca62;
		animation: fengyu 8s linear infinite;
	}
	.box::after{
		animation-delay: -4s; /*动画延迟 -4s*/
	}
	@keyframes fengyu{
		0%,100%{
			clip: rect(0px,220px,2px,0px);
			/* 裁剪 必须有一个前置属性 position: absolute;*/
		}
		25%{
			clip: rect(0px,2px,220px,0px);
		}
		50%{
			clip: rect(218px,220px,220px,0px);
		}
		75%{
			clip: rect(0px,220px,220px,218px);
		}
	}
  </style>
 </head>
 <body>
	<div class="box"></div>
 </body>
</html>

在这里插入图片描述

原网站

版权声明
本文为[辕小白]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43711676/article/details/111875300

边栏推荐

猜你喜欢

随机推荐