h5 loading加载页(单.html文件)

C20611

于 2024-10-11 15:18:08 发布

阅读量1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 微信小程序文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/c20611/article/details/142854772

样式一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3进度条</title>
    <style>
            .loading{
     
     width:100%; height: 100%;position: fixed;top:0;left: 0;z-index: 100;background: #ffffff;}
            .loading .pic{
     
     
            width: 64px;
            height: 64px;
            /* background: url(images/loading.gif); */
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
            margin: auto}
 
            .loading .pic i{
     
     
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background: #399;
                margin: 0 2px;
                transform: scaleY(0.4);
                animation: load 1.2s infinite;
            }
            .loading .pic i:nth-child(1){
     
     animation-delay:0.1s }
            .loading .pic i:nth-child(2){
     
     animation-delay:0.2s }
            .loading .pic i:nth-child(3){
     
     animation-delay:0.3s }
            .loading .pic i:nth-child(4){
     
     animation-delay: 0.4s}
            .loading .pic i:nth-child(5){
     
     animation-delay:0.5s }
 
            @keyframes load{
     
     
                0%,40%,100%{
     
     transform: scaleY(0.4)}
                20%{
     
     transform:scaleY(1) }
            }
    </style>
</head>
<body>
        
        <div class="loading">
            <div class="pic">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
    <img src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg" alt=""/>
</body>
</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=gb2312" />
<title>css3瓒呯偒loading鍔犺浇鐗规晥</title>
<style>
.load1 {
     
     
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.load1 > div {
     
     
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.load1 .rect2 {
     
     
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.load1 .rect3 {
     
     
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.load1 .rect4 {
     
     
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.load1 .rect5 {
     
     
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
     
     
  0%, 40%, 100% {
     
      -webkit-transform: scaleY(0.4) }
  20% {
     
      -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
     
     
  0%, 40%, 100% {
     
     
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
     
     
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
.load2 {
     
     
  width: 60px;
  height: 60px;
  background-color: #67CF22;
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
     
     
  0% {
     
      -webkit-transform: perspective(120px) }
  50% {
     
      -webkit-transform: perspective(120px) rotateY(180deg) }
  100% {
     
      -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes rotateplane {
     
     
  0% {
     
     
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX