HTML+CSS+JS实现 ❤️制作loading动画效果❤️
Posted java李杨勇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JS实现 ❤️制作loading动画效果❤️相关的知识，希望对你有一定的参考价值。
CSS样式：
.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
background: #FFF;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.load1 .loader:before,
.load1 .loader:after {
position: absolute;
top: 0;
content: \'\';
}
.load1 .loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load1 .loader {
text-indent: -9999em;
margin: 8em auto;
position: relative;
font-size: 11px;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.load1 .loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0 #FFF;
height: 4em;
}
40% {
box-shadow: 0 -2em #ffffff;
height: 5em;
}
}HTML代码 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单个元素实现的 CSS3 Loading 效果</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="inner">
<link rel="stylesheet" href="css/load1.css">
<div class="load-container load1">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load2.css">
<div class="load-container load2">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load3.css">
<div class="load-container load3">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load4.css">
<div class="load-container load4">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load5.css">
<div class="load-container load5">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load6.css">
<div class="load-container load6">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load7.css">
<div class="load-container load7">
<div class="loader">Loading...</div>
</div>
<link rel="stylesheet" href="css/load8.css">
<div class="load-container load8">
<div class="loader">Loading...</div>
</div>
</div>
</body>
</html>上面的图片文件和js文件需要引入
以上是关于HTML+CSS+JS实现 ❤️制作loading动画效果❤️的主要内容，如果未能解决你的问题，请参考以下文章