ホームページ > 記事 > ウェブフロントエンド > css3 は単純な読み込みを実装しますanimation_html/css_WEB-ITnose
css3 は単純な読み込みを実装しますanimation_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:321199ブラウズ
css3 は非常に人気があり、私はまだ css2 を非常に冷静にかじっています (ダン) と (テン) とても恥ずかしい思いをしています
私は週末に時間をかけてローディング効果の実装を調べました。 css3 の利点が見え始めました。 大きくうなずきますが、標準がリリースされるたびに新しい言語を学習しているような気がして、少し怖いです。 。 。
ナンセンスな話はもう十分です... コードの表示を開始しましょう
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loading动画实现</title></head><style type="text/css"> body{ text-align:center; } .container{ display: inline-block; } .point{ width:10px; height:10px; background:#2196F3; border-radius:50%; float:left; margin-left:5px; animation:myAnima 1.2s ease-in-out infinite; } .two{ animation-delay: 200ms; } .three{ animation-delay: 400ms; } @keyframes myAnima{ from {opacity: 0.8} to{opacity: 0} }</style><body><div class="container"> <div class="point one"></div> <div class="point two"></div> <div class="point three"></div> </div></body></html> レンダリング:
主に使用される: CSS のアニメーション属性
アニメーション属性は、6 つのアニメーション属性を設定するために使用される略語属性です:
実装アイデア:
まず、3つの点が必要です、ここで渡します 3つの正方形を定義しますこれを達成するには、角の丸みを 50% に設定します。
次に、アニメーションを定義します: myAnima (名前はカスタマイズできます。めんどくさいのでアニメーションの略語を使用して直接名前を付けました)。これは、要素の表示と非表示の効果を実現するために 1 から 0 までの透明度を定義します。
最後に、2 番目と 3 番目の要素にそれぞれアニメーション遅延 (アニメーション遅延) を設定します。これにより、読み込み中に流れる効果を実現するために実行が遅延されます
END..
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。