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特效的代码就这么多了。更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是CSS3的loading特效怎么制作的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PMGoofonts是由开发人员和设计师丈夫签名的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google
使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我得到了完美的
将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时，它被称为Motion-Path，然后被更名。我
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌
热工具
Dreamweaver CS6
视觉化网页开发工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SublimeText3 Linux新版
SublimeText3 Linux最新版
