为什么我的延迟没有效果-慕课网

为什么我的延迟没有效果

来源：2-3 css3进度条小动画

有晴无晴

2017-08-12 19:12

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css进度条</title>
<style type="text/css">
    /* Put your CSS code in the left column, instead of example, to put or remove unnecessary prefixes. */#loading{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      background-color: #fff;
    }
    #loading .imag{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;

    }
     @-webkit-keyframes myfirst{
    0%,40%,100%{ -webkit-transform: scaleY(0.25); transform: scaleY(0.25); }
    20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
    }
    @keyframes myfirst{
    0%,40%,100%{ -webkit-transform: scaleY(0.25); transform: scaleY(0.25); }
    20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
    }
    .imag i{
    width: 6px;
    height: 50px;
    display: block;
    float: left;
    margin: 0 2px;
    background-color: #ccc;
    -webkit-transform: scaleY(0.25);
         -ms-transform: scaleY(0.25);
             transform: scaleY(0.25);
             -webkit-animation: myfirst 1.2s infinite;
                 animation: myfirst 1.2s infinite;
    }
       .img i：nth-child(2){ -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
    .img i：nth-child(3){ -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
    .img i：nth-child(4){ -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
    .img i：nth-child(5){ -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}


    </style>
</head>
<body>
<div id="loading">
  <div>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
   <i></i>
  </div>
</div>
</body>
</html>

写回答关注

1回答

慕粉3702457

2017-08-13 12:36:02

错误1:css中#loading .imag定义了样式 ,而下面的这个div 没有引用
错误2:css中有的名字用的是.imag 而有的用的.img
错误3:关于 :nth-child() 用的是中文的冒号, 一定要切记写代码语法的时候是不能用中文符号的
这3个改完后就可以出来了

0 0

常用的网页加载进度条

通过课程，让你学习到网页中常见的进度加载的实现方式.

32872 学习 · 81 问题

查看课程

相似问题

为什么我的出不来效果，是jq有问题吗？

回答 3

为什么js代码运行无效？

回答 2

我这么写为什么进度条都没有显示，求教各位大神

回答 1

不显示效果

回答 1

为什么我的不旋转呢？

回答 1

打开慕课网App查看更多内容