ホームページ > 記事 > ウェブフロントエンド > CSSで簡単なアニメーション効果を実装する
CSSで簡単なアニメーション効果を実装する
- 一个新手オリジナル
- 2017-10-19 09:11:113387ブラウズ
ここ数日、会社はモバイル Web ページを更新する必要がありました。タスクは簡単なので、初心者の私が行います。私が初めて CSS に触れたのは 2014 年の 1 年生の時で、HTML で勉強していましたが、それ以来触れることはありませんでした。そのため、勉強とタスクの完了を同時に行う必要がありました(⊙﹏⊙)b
構造: Java Web プロジェクトの WebContent ディレクトリの下に「main」という名前のフォルダーを作成し、そのフォルダー内に 2 つのサブフォルダーを作成します。 (css ファイルを保存)、img (画像を保存する)、html ファイルがメイン フォルダーに配置されます。 
HTML ファイルの 93f0f5c25f18dab9d176bd4f6de5d30e...7386ed62805f193350d1f6b9469fa0da css"> としないと、CSS スタイルを読み込むことができません。
CSSで全体のレイアウトを書くのは退屈なので、アニメーションの設定について話しましょう
.logo{
position: absolute;
width: 86%;
left: 6%;
height: 33%;
z-index: 3;
top: 50%;
background: url(../img/test.png) no-repeat top center;
background-size: contain;
animation: bounceInUp .7s ease 0s normal both;
-moz-animation: bounceInUp .7s ease 0s normal both;
-webkit-animation: bounceInUp .7s ease 0s normal both;
-o-animation: bounceInUp .7s ease 0s normal both;
}
section.active .logo{
animation: bounceInUp .7s ease 0s normal both;
-moz-animation: bounceInUp .7s ease 0s normal both;
-webkit-animation: bounceInUp .7s ease 0s normal both;
-o-animation: bounceInUp .7s ease 0s normal both;
}
@keyframes bounceInUp
{
0% {top: -30%;}
40%{top: 55%;}
60%{top: 30%;}
80%{top: 45%;}
100% {top: 50%;}
}
@-webkit-keyframes bounceInUp /* Safari 鍜� Chrome */
{
0% {top: -30%;}
40%{top: 55%;}
60%{top: 30%;}
80%{top: 45%;}
100% {top: 50%;}
}
@-moz-keyframes bounceInUp /* Firefox */
{
0% {top: -30%;}
40%{top: 55%;}
60%{top: 30%;}
80%{top: 45%;}
100% {top: 50%;}
}
@-o-keyframes bounceInUp /* bounceInUp */
{
0% {top: -30%;}
40%{top: 55%;}
60%{top: 30%;}
80%{top: 45%;}
100% {top: 50%;}
}.logo{...}には、特定の画像に関連するすべてのCSSスタイルが含まれています
position属性が使用されます要素の位置を指定する Positioning タイプ、absolute value は絶対に配置された要素を生成します
width、height は画像の幅と高さを設定します ここで注意すべき点は、幅と高さが設定されていない場合です。画像、画像自体は要素を展開しません。
left (/right) は画像と左境界線 (/right border) を指定するために使用されます。
z-indexは、後ろの値が大きいほど、写真が前に表示されます（つまり、他の写真に覆われません）。画像と上の境界線の間の距離
background:url(../img/2.png); 使用する画像のパスを指定します
background-repeat: 属性は画像を繰り返すかどうかを示します。デフォルトは「no-repeat」で、繰り返しがないことを意味します
background -size 属性は、画像の背景のサイズを設定します
.logo{...} の最後の 4 つの文は、画像アニメーションの設定です。アニメーションアニメーション属性の構文をある程度理解する必要があります:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
其相应的作用是：
动画(声明) : 动画的名称 动画完成时间 运动路径 延迟时间 播放次数 是否逆向播放 动画不播放时要用到的元素样式 指定动画是否正在运行或暂停
此时会有人说为什么相同的一句语法要重复四次？因为有些浏览器不支持keyframes规则，所以要用相应的浏览器中的支持替代，所以
@keyframes bounceInUp{...}
@-webkit-keyframes bounceInUp{...}
@-moz-keyframes bounceInUp{...}
@-o-keyframes bounceInUp{...}
这四条语句块中的内容也是完全相同，其中的0%{}，40%{}，60%{}，80%{}，100%{}指定图片的动画在完成到整体动画的百分比进度时的位置所在，因为我使用的是bounceInUp动画，即从上往下进入，所以其中用top指定图片的位置
最后在html中调用外部css样式语句，在<body>...</body>中添加<p class="logo"></p>即可调用动画
以上がCSSで簡単なアニメーション効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。