So erstellen Sie CSS3-Ladeeffekte-CSS-Tutorial-php.cn

So erstellen Sie CSS3-Ladeeffekte

php中世界最好的语言

Freigeben： 2017-11-25 11:24:23

Original

1924 Leute haben es durchsucht

Wie erstelle ich CSS3-Ladeeffekte? Warum brauchen wir Ladeeffekte? Wie stelle ich Ladeeffekte ein? Heute stellen wir es Ihnen im Detail vor.

<!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>

Nach dem Login kopieren

Es gibt so viele Codes für die Verwendung von CSS3 zum Erstellen von Ladeeffekten. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie CSS3, um Symboleffekte zu erstellen

So verwenden Sie CSS3, um Umschalteffekte für unregelmäßige Bilder zu erstellen

So verwenden Sie CSS3, um Textanimationen unter Lichtbeleuchtung zu erstellen

Das obige ist der detaillierte Inhalt vonSo erstellen Sie CSS3-Ladeeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!