Home > Article > Web Front-end > How to create CSS3 loading effects

How to create CSS3 loading effects

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

How to create the loading effect of CSS3? Why do we need loading effects? How to set loading effects? Today we will introduce it to you in detail.

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

There are so many codes for using CSS3 to do loading effects. For more exciting content, please pay attention to other related articles on the php Chinese website!

How to create CSS3 loading effects

Related articles