响应式简历里面的头像边框要求鼠标悬停在头像区域时，box-shadow放大后再缩小的闪烁效果
一开始用的transition，效果接近，但没有闪烁效果
.user-inform .user-img { margin-top: 80px; margin-left: auto; margin-right: auto; width: 120px; height: 120px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 5px #88bde8; transition: box-shadow 1s ease 0s;
.user-inform .user-img:hover {
box-shadow:
一开始甚至把transition的一些属性和animation的搞混了，写成了 transition: box-shadow 1s ease infinite; 在chrome的调试工具窗中发现了报错
注意：transition的属性是 transition-property（属性）, transition-duration（持续时间）, transition-timing-function（动效/缓动函数）, transition-delay（延迟时间）
所以transition 并没有 infinite 这个属性
改用animation后，闪烁效果成功做出，但是变成一直在闪烁，而不是最初想要的只有鼠标悬停时才变化
.user-inform .user-img { margin-top: 80px; margin-left: auto; margin-right: auto; width: 120px; height: 120px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 5px #88bde8; 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 { margin-top: 80px; 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; } }
