问答详情
源自：2-3 css3进度条小动画

看不出错在哪

为什么都没有效果，代码都一毛一样啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>进度条3</title>

<style>

.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;}

.loading .pic{width:50px;height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

.loading .pic i{display:block;float:left;width:6px;height:50px;background:#F36;margin:0 2px;transform:scaleY(0.4);

animation:load 1.2s infinite;}


@keyframes load{

0%,40%,100%{transform:scaleY(0.4)}

}

20%{transform:scaleY(1)}

}

</style>

</head> 


<body>

<div class="loading">

<div class="pic">

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

</div>

</div>


<img src="http://imgsrc.baidu.com/imgad/pic/item/b03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg" alt="" />

<img src="http://imgsrc.baidu.com/imgad/pic/item/574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg" alt="" />

<img src="http://tupian.enterdesk.com/2013/mxy/12/11/4/4.jpg" alt="" />

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113966034&di=3aca769a417e0201a06c662d64e12b2a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue%252C0%252C0%252C245%252C40%2Fsign%3D4ea99ec2f8d3572c72ef949fe27a0952%2Ff7246b600c338744af80e6575b0fd9f9d72aa050.jpg" alt="" />

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113966033&di=82a53309f165724b2d2246803a97e12c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb812c8fcc3cec3fdd71a0456dc88d43f879427e8.jpg" alt="" />

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113989285&di=e3bd8c99fa83d6561e3d03c10d92bd1e&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F14%2Fc0391a6c1efab3fe00911b04e8cedca4.jpg" alt="" />

<img src="http://b.hiphotos.baidu.com/image/pic/item/d1a20cf431adcbef27ec5330a6af2edda3cc9f2f.jpg" alt="" />

<img src="http://f.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc4e43f99cd33dbb6fd5266332f.jpg" alt="" />

</body>

</html>


提问者：qazwsxhyjy 2017-07-16 16:32

个回答

  • 跳动的音符
    2017-07-20 08:47:05

    这个课程需要引入jQuery插件。jQuery是一个快速、简洁的JavaScript框架。

    0
  • 郑州森度慕光
    2017-07-16 18:36:00

    没有引入jQUERY,<script src="js/jquery-3.2.1.min.js"></script>

    0