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

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イーズ無限;
}


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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。