前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光

代码如下:

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 - 锐客网 前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光
文章图片

鼠标未移动在头像上时


鼠标移动到头像上时


如果头像太大, 可以通过样式来限制, 可以在前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光
文章图片

效果如下:


另外, 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 - 锐客网 前端(frontend)|用css让头像变圆且鼠标悬停在图片上时会发光
文章图片



效果如下:


OK, Enjoy it!!!例子代码下载

    推荐阅读