纯css制作炫酷流动边框

最新推荐文章于 2024-04-16 14:16:52 发布

慢性子

最新推荐文章于 2024-04-16 14:16:52 发布

阅读量3.4k

点赞数 2

分类专栏：学习

本文链接：https://blog.csdn.net/jimjack2013/article/details/102546465

版权

学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
	<style>
		div{
  width: 190px;
  height: 190px;
  background: #00ff00;
  position: relative;
}

div:before,
div:after{
  position: absolute;
  content: "";
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border: 5px solid #FF33FF;
}
div:before{
  animation: move 5s linear infinite;
}
div:after{
  border-color: #FF33FF;
  animation: move 5s linear infinite normal -2.5s;
}

@keyframes move{
  0%,100%{
    clip: rect(0,200px,5px,0);
  }
  25%{
    clip: rect(0,200px,200px,195px);
  }
  50%{
    border-color: #00ff0088;
    clip: rect(195px,200px,200px,0);
  }
  75%{
    clip: rect(0,5px,200px,0px);
  }
}
	</style>
</html>

优惠劵

慢性子

关注关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
纯css制作炫酷流动边框

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> </body> <style> di...
复制链接

扫一扫