版权声明：请不要将我的内容平移到你的博客变成你的名字，尊重知识 https://blog.csdn.net/wangzhneg123/article/details/88060891
效果展示：
源码展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css实现hover动画效果</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
position:relative;
width:200px;
height:100px;
border:1px #000 solid;
}
div p {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
overflow:hidden;
z-index:999;
}
div p::before,div p::after {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
content:'';
opacity:0;
pointer-events:none;
-webkit-transition:opacity 0.4s,-webkit-transform 0.4s;
transition:opacity 0.4s,transform 0.4s;
}
div p::before {
border-top:2px solid #f00;
border-bottom:2px solid #f00;
-webkit-transform:scale(0,1);
transform:scale(0,1);
}
div p::after {
border-right:2px solid #f00;
border-left:2px solid #f00;
-webkit-transform:scale(1,0);
transform:scale(1,0);
}
div:hover p::before,div:hover p::after {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1);
}
nav{
margin-top: 50px;
text-align: center;
}
nav>div{
margin: auto;
}
</style>
</head>
<body>
<nav>
<h1>鼠标移动到下框上</h1>
<div>
<p></p>
</div>
</nav>
<hr>
<pre style="color:red">
感： 最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客
--王
</pre>
</body>
</html>