html背景向四周散开,实现背景框从中间向四周扩散的效果

原标题：实现背景框从中间向四周扩散的效果

实现背景框从中间向四周扩散的效果,运用原理主要运用到css的伪类和css3动画，可用在一些网站中展示栏的背景特效！效果：

背景框会由中间由小缓慢变大！

代码：

html：

css：

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%;}

运用到:before 伪类，css3的transition属性返回搜狐，查看更多

责任编辑：