html - 这种类型的动画可以使用吗？

Question

我制作了一个动画边框动画。但实际上，这只是一种错觉。

这是 HTML

body {
	margin: 0;
	padding: 0;
	font-family: verdana;
}

.container {
	text-align: center;
	position: relative;
	margin-top: 15%;
	left: 35%;
}

.outer-block {
	width: 30vw;
	height: 30vh;
	background-color: white;
	overflow: hidden;
}

.inner-block {
	position: relative;
	display: inline-flex;
	width: 28vw;
	height: 27vh;
	background-color: white;
	top: -39.5vh;
	z-index: 2000;
}

.block-1 {
	height: 50vh;
	width: 5vw;
	background-color: black;
	z-index: 10;
	float: left;
	margin-left: 5vw;
	margin-top: -9vh;
}

.block-2 {
	top: 10vh;
	height: 50vh;
	width: 5vw;
	background-color: black;
	z-index: 10;
	float: left;
	margin-left: 10vw;
	margin-top: -9vh;

}

.outer-block:hover .block-1 {
	transform: rotate(1440deg);
	transition-duration: 12s;
	animation-name: colorchange;

}

.outer-block:hover .block-2 {
	transform: rotate(1440deg);
	transition-duration: 12s;
	animation-name: colorchange;
}

<div class="container">
	<div class="outer-block">
	  <div class="block-1"></div>
	  <div class="block-2"></div>

    <div class="inner-block"></div>
  </div>
</div>

所以基本上，我在彼此之上制作多个形状。通过隐藏溢出并将动画部分放置在按钮之间，我可以更多地控制边框动画（不是真正的边框），因为我可以控制每个形状路径。

我唯一担心的是它会在某个地方显示出它的弱点。我应该继续做这样的事情，还是最好避免这样做？

https://codepen.io/dario-sanchez-martinez/pen/LgZMZV

标签： htmlcssanimation