CSS3 loading特效制作

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html >

  <head>

    <meta charset="UTF-8">

    <title>CSS3 loading特效</title>

                   <meta name="keywords" content=" CSS3 loading特效" />

   

    <link rel="stylesheet" href=http://www.divcss5.com/css3-style/"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=http://www.divcss5.com/css3-style/"js/prefixfree.min.js"></script>

 

   

  </head>

 

  <body>

 

    <div class="loader">

  <span>L</span>

  <span>O</span>

  <span>A</span>

  <span>D</span>

  <span>I</span>

  <span>N</span>

  <span>G</span>

 

  <div class="covers">

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2119.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • Ч
  • HTML
  • Doctype
  • !
  • loading