- 首页 > it技术 > >
前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光
jspSSH框架前端(frontend)
代码如下:
index.html
.img-circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}.img-circle:hover {
-moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
-webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
cursor: pointer;
}Insert title here - 锐客网
文章图片
鼠标未移动在头像上时
鼠标移动到头像上时
如果头像太大, 可以通过样式来限制, 可以在
文章图片
效果如下:
另外, z-index值一定要比周围元素的要高, 否则有可能出现头像被其他元素遮挡住, 可以用.img-circle里加上z-index: 99;
如果还想在头像外加上一层border像光晕也是可以的,为突出效果, 我设置body的背景颜色
完整代码如下:
body {
background-color: #0D5193;
}
.img-circle {
z-index: 99;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 8px solid;
border-color: rgba(255, 255, 255, 0.2);
}.img-circle:hover {
-moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
-webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
cursor: pointer;
}Insert title here - 锐客网
文章图片
效果如下:
OK, Enjoy it!!!例子代码下载
推荐阅读