html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{position:relative;background:black;width:400px;height:400px;}
div:before{opacity: 0;width:0;height:0;transition: all linear 1s;position:absolute;left:50%;top:50%;content: "";z-index: 999;border:2px solid white;}
div:hover:before{opacity: 1;width:90%;height:90%;left:5%;top:5%;}
/*第二个效果*/
.d2{width:200px;height:200px;background:black;position:relative;margin-top:20px;}
.d2:before,.d2:after{content: "";position:absolute;left:0;right:0;top:0;bottom:0;transition: all linear 1s;background:none;z-index:999}
.d2:hover:before{left:200px;right:200px;background:white;}
.d2:hover:after{top:200px;bottom:200px;background:white;}
</style>
</head>
<body>
<!--
怎么实现背景框从中间向四周扩散的效果
-->
<div>
</div>
<!--
怎么实现背景像横向和纵向中间聚集消失
-->
<p class="d2">
</p>
</body>
</html>
