css 旋转边框（巧）

weixin_43362799

已于 2022-09-20 15:24:42 修改

阅读量271

点赞数

文章标签： css html 前端

于 2022-09-14 09:03:22 首次发布

本文链接：https://blog.csdn.net/weixin_43362799/article/details/126841197

版权

CSS 动画旋转 keyframes transform

关键词由CSDN通过智能技术生成

描述

实现这种效果

Video_20220913203333

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: black;
			}
			.box{
				position: relative;
				width: 100px;
				height: 100px;
				margin: 50px auto;
				background-color: black;
				overflow: hidden;
				border: 1px solid blue;
			}
			.son1{
				width: 150px;
				height: 50px;
				background-color: red;
				transform: translate(0px, 40px);
				animation: move 1s linear infinite;
			}
			@keyframes move {
				0%{
					transform: translate(-30px, 20px) rotate(0deg);
				}
				100%{
					transform: translate(-30px, 20px) rotate(180deg);
				}
			}
			.son2{
				position: absolute;
				width: 96px;
				height: 96px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		
		<script>
			
		</script>
	</body>
</html>