当前位置：网站首页>線條動畫

線條動畫

2022-06-28 05:27: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://yzsam.com/2022/179/202206280521409302.html

边栏推荐

猜你喜欢

随机推荐