css3实现光环放大 |css2 div 圆角

按钮素材css，html div 居中 css，css中行内换行显示，html多张图片滚动CSS，css 字体变成竖着背景透明，css中背景颜色蓝色代码，css2 div 圆角 css3实现光环放大 |css2 div 圆角

要实现光环放大效果，大家需要使用CSS3中的伪元素:after。通过对这个元素的样式设置，大家可以实现光环的效果。

selector:after {
content: "";
position: absolute;
z-index: -1;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
border-radius: 50%;
background-color: rgba(255, 255, 255, .2);
filter: blur(30px);
opacity: 0;
transition: all 0.3s ease-in-out;
}
selector:hover:after {
width: calc(100% + 50px);
height: calc(100% + 50px);
top: -25px;
left: -25px;
opacity: 1;
}

在上面的代码中，大家使用了伪元素:after来生成光环效果。这个元素的content属性设置为空字符串，这个元素的位置使用了绝对定位，所以大家需要保证父元素相对定位。

设置宽度和高度为calc(100% + 20px)是为了让光环超出父元素范围，以便形成完整的光环效果。边框半径设置为50%是为了让光环成为圆形，加上背景色和模糊效果能够让光环更加立体。

在:hover状态下，大家把光环的宽度和高度分别设置成calc(100% + 50px)，加上top和left属性的负值可以让光环变得更大，并且改变透明度来让光环更加明显。

使用CSS3实现光环放大效果非常简单，只需要对:before或:after中的样式进行设置就可以实现。通过改变不同的样式属性，可以得到不同的光环效果。