1.一个标题,鼠标悬浮时从图片中心伸出一个类似箭头指示的线条,
使用jquery hover添加类的方法给这个标题添加动画,动画是用css keyframes做的,
困惑的是有时候线条动画还没到终点鼠标就移开了,然后线条动画就中断,想要做成,如果鼠标移开,动画依然完成,完成之后再消失,有办法实现吗
html:
SM9的国密算法
的检测、加固、态势感知
css:
.line5{
position: relative;
top:150px;
left: 540px;
width: 0%;
height: 3px;
background-color: #3ebbff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#3ebbff), to(#3ebbff));
-webkit-animation:aaa 2s linear 1;
-webkit-animation-fill-mode:both;
}
@keyframes aaa{
0% {width:0%; }
30% {width:2%; }
60% {width:6%; }
100%{width:10%; }
}
jquery:
$(document).ready(function(){
// alert();
$(".rightcolumn .index2").hover(function(){
$("#linear5").addClass("line5");
},function(){
$("#linear5").removeClass("line5");
})
})