html 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 预加载 </title>
- <style>
- *{margin: 0;padding: 0;border: 0 none;}
- p{text-align: center;margin-top: 20px;}
- .loading{position: relative;width: 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
- .loading .center{position: relative;;left: 30%;top:60%;}
- .loading span{position: absolute;bottom:0;display: block;width: 12px;height: 10px;background-color: #8067C5;animation: loading 1.5s infinite ease-in-out; }
- .loading span:nth-child(2){left: 16px;animation-delay: 0.2s;}
- .loading span:nth-child(3){left: 32px;animation-delay: 0.4s;}
- .loading span:nth-child(4){left: 48px;animation-delay: 0.6s;}
- .loading span:nth-child(5){left: 64px;animation-delay: 0.8s;}
- @keyframes loading {
- 0%{
- background-color: #8067C5;
- transform: translateY(0);
- height: 10px;
- }
- 25%{
- background-color: #3196DC;
- transform: translateY(15px);
- height: 40px;
- }
- 50%{
- background-color: #8067C5;
- transform: translateY(0);
- height: 10px;
- }
- 100%{
- background-color: #8067C5;
- transform: translateY(0);
- height: 10px;
- }
- }
- /* 第二种预加载 */
- .loading2{position: relative;width: 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
- .loading2 .center{position: relative;;left: 40%;top:30%;}
- .loading2 span{display: block;width: 20px;height: 20px;background-color: #8067C5;position: absolute;animation: item1 1.5s infinite ease-in-out;}
- .loading2 span:nth-child(2){left: 20px;animation: item2 1.5s infinite ease-in-out;}
- .loading2 span:nth-child(3){top: 20px;left:0;animation: item3 1.5s infinite ease-in-out;}
- .loading2 span:nth-child(4){left: 20px;top:20px;animation: item4 1.5s infinite ease-in-out;}
- @keyframes item1 {
- 0%{
- border-radius: 0;
- transform: translateX(0) translateY(0) rotate(0deg);
- }
- 50%{
- transform:translateX(-20px) translateY(10px) rotate(-180deg);
- border-radius: 20px;
- background-color: #4CAD84;
- }
- 80%{
- transform:translateX(0) translateY(0) rotate(-360deg);
- border-radius: 0;
- }
- 100%{
- transform:translateX(0) translateY(0) rotate(-360deg);
- border-radius: 0;
- }
- }
- @keyframes item2{
- 0%{
- border-radius: 0;
- transform:translateX(0) translateY(0) rotate(0deg);
- }
- 50%{
- transform:translateX(20px) translateY(10px) rotate(180deg);
- border-radius: 20px;
- background-color: #CA5251;
- }
- 80%{
- transform:translateX(0) translateY(0) rotate(360deg);
- border-radius: 0;
- }
- 100%{
- transform:translateX(0) translateY(0) rotate(360deg);
- border-radius: 0;
- }
- }
- @keyframes item3{
- 0%{
- border-radius: 0;
- transform:translateX(0) translateY(0) rotate(0deg);
- }
- 50%{
- transform:translateX(-20px) translateY(-10px) rotate(-180deg);
- border-radius: 20px;
- background-color: #4C89CC;
- }
- 80%{
- transform:translateX(0) translateY(0) rotate(-360deg);
- border-radius: 0;
- }
- 100%{
- transform:translateX(0) translateY(0) rotate(-360deg);
- border-radius: 0;
- }
- }
- @keyframes item4{
- 0%{
- border-radius: 0;
- transform:translateX(0) translateY(0) rotate(0deg);
- }
- 50%{
- transform:translateX(20px) translateY(-10px) rotate(180deg);
- border-radius: 20px;
- background-color: #D9A93B;
- }
- 80%{
- transform:translateX(0) translateY(0) rotate(360deg);
- border-radius: 0;
- }
- 100%{
- transform:translateX(0) translateY(0) rotate(360deg);
- border-radius: 0;
- }
- }
- /* 第三种预加载 */
- .loading3{position: relative;width: 200px;margin:10px auto;background-color: #ECF0F1;height: 100px;}
- .loading3 .center{position: relative;;left: 30%;top:40%;}
- .loading3 span{opacity: 0.5;display: block;width: 20px;height: 20px;background-color: #CC525D;position: absolute;animation: three 1.5s infinite ease-in-out;border-radius: 20px;}
- .loading3 span:nth-child(2){background-color: #8067C5;left: 25px;animation-delay: .2s;}
- .loading3 span:nth-child(3){background-color: #de898c;left: 50px;animation-delay: .4s;}
- .loading3 span:nth-child(4){background-color: #4CAD84;left: 75px;animation-delay: .6s;}
- .loading3 span:nth-child(5){background-color: #D9A93B;left: 100px;animation-delay: .8s;}
- @keyframes three {
- 0%{transform: translateY(0);box-shadow: 0 0 3px rgba(0, 0, 0, 0.01);opacity: 0.3;}
- 50%{transform: translateY(-10px);opacity: 1;box-shadow: 0 20px 3px rgba(0, 0, 0, 0.05);}
- 80%{transform: translateY(-5px);opacity: 0.7;box-shadow: 0 10px 3px rgba(0, 0, 0, 0.03);}
- 100%{transform: translateY(0);opacity: 0.3;box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}
- }
- </style>
- </head>
- <body>
- <p > 第一种预加载动画 </p>
- <div class="loading">
- <div class="center">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- <p > 第二种预加载动画 </p>
- <div class="loading2">
- <div class="center">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- <p > 第三种预加载动画 </p>
- <div class="loading3">
- <div class="center">
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/30654/ba99efe9f5ae19444cda408efb44bf35.html