Comment créer des effets de chargement CSS3-tutoriel CSS-php.cn

Comment créer des effets de chargement CSS3

php中世界最好的语言

Libérer： 2017-11-25 11:24:23

original

1963 Les gens l'ont consulté

Comment créer des effets de chargement CSS3 ? Pourquoi avons-nous besoin d’effets de chargement ? Comment définir les effets de chargement ? Aujourd'hui, nous allons vous le présenter en détail.

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>CSS3 loading特效</title>
                   <meta name="keywords" content=" CSS3 loading特效" />
    <link rel="stylesheet" href="css/normalize.css">
        <style>
* {
  box-sizing: border-box;
  overflow: hidden;
}
body {
  padding-top: 10em;
  text-align: center;
}
.loader {
  position: relative;
  margin: auto;
  width: 350px;
  color: white;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 250%;
  background: linear-gradient(180deg, #222 0, #444 100%);
  box-shadow: inset 0 5px 20px black;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.loader:after {
  content: "";
  display: table;
  clear: both;
}
span {
  float: left;
  height: 100px;
  line-height: 120px;
  width: 50px;
} 
.loader > span {
  border-left: 1px solid #444;
  border-right: 1px solid #222;
} 
.covers {
  position: absolute;
  height: 100%;
  width: 100%;
}
.covers span {
  background: linear-gradient(180deg, white 0, #ddd 100%);
  animation: up 2s infinite;
} 
@keyframes up {
  0%   { margin-bottom: 0; }
  16%  { margin-bottom: 100%; height: 20px; }
  50% { margin-bottom: 0; }
  100% { margin-bottom: 0; }
}
.covers span:nth-child(2) { animation-delay: .142857s; }
.covers span:nth-child(3) { animation-delay: .285714s; }
.covers span:nth-child(4) { animation-delay: .428571s; }
.covers span:nth-child(5) { animation-delay: .571428s; }
.covers span:nth-child(6) { animation-delay: .714285s; }
.covers span:nth-child(7) { animation-delay: .857142s; }
    </style>    
       <script src="js/prefixfree.min.js"></script>    
  </head>
  <body>
    <div>
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
 <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>    
<div style="width: 100%; height: 50px; line-height: 50px; text-align: center;">      
</div>  
  </body>
</html>

Copier après la connexion

Il existe de nombreux codes permettant d'utiliser CSS3 pour créer des effets de chargement. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Comment utiliser CSS3 pour créer des effets d'icônes

Comment utiliser CSS3 pour créer des effets de commutation pour des images irrégulières

Comment utiliser CSS3 pour créer une animation de texte avec un éclairage lumineux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!