ホームページ > 記事 > ウェブフロントエンド > CSS はクリエイティブなページ読み込みアニメーション効果を実装します
CSS はクリエイティブなページ読み込みアニメーション効果を実装します
- yuliaオリジナル
- 2018-10-20 10:48:383633ブラウズ
Web サイトを閲覧しているときに、「読み込み中です。しばらくお待ちください」というページに遭遇したことはありますか? フロントエンド エンジニアとして、CSS を使用してページ読み込み (読み込み) アニメーション効果を作成できますか?この記事では、クリエイティブなページの読み込み (読み込み) アニメーション コードを紹介します。興味のある友人は参照してください。
クリエイティブ ページの読み込み (読み込み) アニメーションを作成するには、CSS でアニメーション アニメーション、変換属性などの多くの属性を使用する必要があります。よくわからない場合は、次の関連情報を参照してください。 PHP 中国語 Web サイトの記事、または CSS ビデオ チュートリアル にアクセスしてください。
インスタンスの説明: div を使用して、読み込みプロセス中に正方形が Y 軸に沿って反転し、次に X 軸に沿って反転します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.spinner {
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(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>効果 図に示すように:
上記は、クリエイティブな正方形の読み込み (読み込み) ページ効果コードを共有しました。これは比較的単純です。初心者は自分で練習して、ページ読み込みのアニメーション効果を実現できますか?この記事が役立つことを願っています。
【おすすめ関連チュートリアル】
1. CSS3 ビデオ チュートリアル
3.ブートストラップ チュートリアル
以上がCSS はクリエイティブなページ読み込みアニメーション効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。