コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > C3_html/css_WEB-ITnose のアニメーションと変換を使用して記述された、シミュレートされた読み込みアニメーション効果

C3_html/css_WEB-ITnose のアニメーションと変換を使用して記述された、シミュレートされた読み込みアニメーション効果

WBOY
リリース： 2016-06-24 11:20:54
オリジナル
1193 人が閲覧しました

C3 でアニメーションとトランスフォームを使用して、読み込みアニメーション効果をシミュレートします。

そのままコードに進みましょう;

html タグ部分


C3 でアニメーションと変換を使用して、模倣読み込みアニメーション効果を作成します< ;/h2>




;


30px;

margin:100px auto;

} .demo div{

float:left;

width:5px;
height:30px;
margin-left:5px;

}
@-webkit-keyframes 変動{
20%{
transform:scaleY(0.5);
}
0%,40%,70%,100%{
変換:scaleY(1);
}
}

.demo div:nth-of-type( 1){
背景:赤;
アニメーション: 変動 1s 0s イーズアウト無限;
}
.demo div:nth -of-type(2){
背景: yellow;
アニメーション: 変動 1 秒 0.9 秒 緩和無限大
}
.demo div:nth-of-type(3){
背景:青;
アニメーション: 変動 1 秒 0.6 s イーズ 無限;
}
.demo div:nth-of-type(4){
背景: 緑;
アニメーション: 変動 1 秒 0.4 秒イーズ 無限;
}
.demo div:nth-of-type(5) {
background:pink;
アニメーション:ゆらぎ1s 0sイーズ無限;
}


初めてブログを書く際に間違いやより良い実装方法があれば幸いです。お時間ございましたら、お気軽にプライベートメッセージをお送りください。





関連ラベル：
用C3中的animation和transform写的一个模仿加载的时动画效果
ソース：php.cn
前の記事：CSS 学習ノートの概要とテクニック_html/css_WEB-ITnose 次の記事：iOS アニメーション アニメーション-4-4: CALayer サブクラス: CAReplicatorLayer_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2275
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2409
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2026
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1914
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1981
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート