原html结构
<div class="user-inform"> <div class="user-img"> <img src="http://coding.imweb.io/img/project/resume/avatar.png" alt="简历头像"> </div> </div>
原css结构
.user-inform .user-img { margin-top: 100px; margin-left: auto; margin-right: auto; width: 120px; height: 120px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 5px #88bde8; } .user-inform .user-img:hover { animation: circleRun 1s ease infinite; } @keyframes circleRun { 0% { box-shadow: 0 0 0 5px #88bde8; } 50% { box-shadow: 0 0 5px 10px #88bde8; } 100% { box-shadow: 0 0 0 5px #88bde8; } } .user-inform .user-img img{ position: absolute; width: 120px; height: 115px; }
得到老师的建议是,img是png格式的,所以完全可以设置img的背景色,以及border-radius,不需要在外面包裹div来做这些。
修改后的html结构
<div class="user-inform"> <img src="http://coding.imweb.io/img/project/resume/avatar.png" alt="简历头像"> </div>
修改后的cssl结构
.user-inform img{ width: 120px; height: 120px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px #88bde8; } .user-inform img:hover { animation: circleRun 1s ease infinite; } @keyframes circleRun { 0% { box-shadow: 0 0 0 5px #88bde8; } 50% { box-shadow: 0 0 5px 10px #88bde8; } 100% { box-shadow: 0 0 0 5px #88bde8; } }