滑鼠懸浮上去 實現光暈效果
阿新 • • 發佈：2019-02-11
#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
}
}
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
}
}