类似阿里云的逐帧动画有会的么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{padding: 0; margin: 0;}
@-webkit-keyframes slide-market20 {
0% {
background-position: 0 0;
}
100%{
background-position: 0 -4425px;
}
}
@-webkit-keyframes slide-market21 {
0% {
background-position: 0 -4425px;
}
100%{
background-position: 0 0px;
}
}
.ali-product-img{
/*position: relative;*/
height: 75px;
width: 75px;
background:url(./images/index-skill3.jpg) no-repeat ;
margin: 0 auto;
background-size: 75px;
background-position: 0 0;
}
.slide-market20 {
animation: slide-market20 2s steps(59,end);
}
.slide-market21 {
animation: slide-market21 2s steps(59,end);
}
</style>
<div class="ali-product-img" ></div>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
$(".ali-product-img").mouseover(function () {
$(this).removeClass("slide-market21").addClass("slide-market20")
})
$(".ali-product-img").mouseleave(function () {
$(this).removeClass("slide-market20").addClass("slide-market21")
})
})
</script>
</body>
</html>
在网上搜到的代码 动画结束时会跳到初始状态 怎么解决啊
qq__85651回答
随时随地看视频慕课网APP
相关分类
CSS3