CSS3的loading特效怎么制作

来源：懂视网责编：小采时间：2020-11-27 18:49:45

CSS3的loading特效怎么制作

CSS3的loading特效怎么制作:CSS3的loading特效怎么制作？为什么要做loading特效？loading特效怎么设置？今天我们就给大家详细介绍一下。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title&

推荐度：

点击下载本文 文档为doc格式

导读CSS3的loading特效怎么制作:CSS3的loading特效怎么制作？为什么要做loading特效？loading特效怎么设置？今天我们就给大家详细介绍一下。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title&

CSS3的loading特效怎么制作？为什么要做loading特效？loading特效怎么设置？今天我们就给大家详细介绍一下。

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

用CSS3做loading特效的代码就这么多了。更多精彩请关注Gxl网其它相关文章！

CSS3的loading特效怎么制作

推荐度：

点击下载本文 文档为doc格式

标签：制作特效效果

热门焦点

CSS3的loading特效怎么制作

CSS3的loading特效怎么制作

CSS3的loading特效怎么制作

最新推荐

猜你喜欢

热门推荐