Heim > Artikel > Web-Frontend > So erstellen Sie CSS3-Ladeeffekte

So erstellen Sie CSS3-Ladeeffekte

php中世界最好的语言Original: 2017-11-25 11:24:231842Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3 zum Erstellen von SymboleffektenNächster Artikel：So verwenden Sie CSS3 zum Erstellen von Symboleffekten

In Verbindung stehende Artikel

Mehr sehen