鼠标悬浮上去 实现光晕效果

来源:互联网 发布:web网络考勤管理系统 编辑:程序博客网 时间:2024/05/17 08:57
#btn-attend{
cursor: pointer;
text-decoration: none;
color: #fff;
border-radius: 10px;
position: absolute;
left:40px;
       }
#btn-attend:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
opacity: 0;
border:1px solid #999;
       }
#btn-attend:hover:after{
-webkit-animation:boom 0.6s ease;
animation:boom 0.6s ease;
       }
@-webkit-keyframes boom {
0% {
opacity: 0
}
5% {
  opacity: 1
}
100% {
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
 opacity: 0
}
}
@keyframes boom {
0% {
opacity: 0
}
5% {
  opacity: 1
}
100% {
 transform: scale(1.3);
 transform: scale(1.3);
 opacity: 0
}
}
2 0
原创粉丝点击