线条动画

最新推荐文章于 2024-07-18 14:29:38 发布

辕小白

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量154

点赞数

分类专栏：作品文章标签： css

本文链接：https://blog.csdn.net/qq_43711676/article/details/111875300

版权

作品专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

辕小白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
线条动画

<!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" co
复制链接

扫一扫