如何实现图片加载中，会有一个圈圈在动的效果

用AJAX可以做到判断图片是否加载完成，在加载完成之前先显示那个圈圈的滚动GIF图片就可以了，再或者滑瞎告诉你一个最简单的方法，你把房图片的那个层用background-img填充上那肢让橘个滚动的圈圈图片，等你的要加载的图历团片加载完后就能自动覆盖那个圈圈的背景图片了~

这个很简单，你PHP程序运行结束后可以echo出一段灶大差脚本比如：

echo "<script language='javascript'>fadeOut()</script>"

然后html js脚本可以这么写：

<div id="隐皮loading">

程序加载中，请稍等.....

(里面可以放你要的等待转圈的图片或者将其设置为背景图)

</div>

<script language='仿逗javascript'>

function fadeOut(){

document.getElementById("loading").style.display="none"

}

</script>

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对纳芦塌HTML中的洞圆内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，哗友负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。

---