本篇文章主要介绍了"简单的CSS图片动画（鼠标悬浮效果）"，主要涉及到CSS方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
效果如下：
素材：一张宽 400px , 高 250px 的图片，一个宽 200px , 高 125px块级容器
原理：设置块级容器的background-i...
效果如下：
素材：一张宽 400px , 高 250px 的图片，一个宽 200px , 高 125px块级容器
原理：设置块级容器的background-image + animation设置帧动画 + 鼠标hover实现
代码如下：
<htmllang="en"><head><metacharset="UTF-8"><title>Documenttitle><styletype="text/css">.a{
width:200px;
height:125px; /* 图片的宽高 > 放图片的div容器宽高，不然放大后图片不清晰*/background-image:url(../img/animation.jpg);
background-size:200px 125px;
background-position:center; /*保持背景位置为center*/}@keyframes ani{
0%{
background-size:200px 125px; /*若不设置 0%：没有平滑的动画效果 */}/*若设置多个百分梯度：动画会分梯度生硬过度*/ 100%{
background-size:400px 250px;
}
}
.a:hover{
animation:ani 1s; /*与@keyframes绑定 并规定在1s内完成动画*/animation-fill-mode : forwards; /*鼠标不离开容器，仍保持动画的最后效果*/}style>head><body><divclass="a">div>body>html>
').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('
').text(i));
};
$numbering.fadeIn(1700);
});
});
以上就介绍了简单的CSS图片动画（鼠标悬浮效果），包括了CSS方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_793154.html
