CSS3ローディングエフェクトの作成方法-CSSチュートリアル-php.cn

CSS3ローディングエフェクトの作成方法

php中世界最好的语言

リリース： 2017-11-25 11:24:23

オリジナル

1933 人が閲覧しました

CSS3 読み込みエフェクトを作成するには?なぜエフェクトをロードする必要があるのでしょうか?ローディングエフェクトを設定するにはどうすればよいですか?今日はそれを詳しくご紹介します。

<!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 を使用してローディング効果を作成するためのコードがたくさんあります。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。

css3 を使用してアイコン効果を作成する方法

CSS3 を使用して不規則な画像の切り替え特殊効果を作成する方法

CSS3 を使用して照明とテキストアニメーションを作成する方法

以上がCSS3ローディングエフェクトの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。