CSSで簡単なアニメーション効果を実装する-CSSチュートリアル-php.cn

CSSで簡単なアニメーション効果を実装する

一个新手

リリース： 2017-10-19 09:11:11

オリジナル

3444 人が閲覧しました

ここ数日、会社はモバイル Web ページを更新する必要がありました。タスクは簡単なので、初心者の私が行います。私が初めて CSS に触れたのは 2014 年の 1 年生の時で、HTML で勉強していましたが、それ以来触れることはありませんでした。そのため、勉強とタスクの完了を同時に行う必要がありました(⊙﹏⊙)b

構造: Java Web プロジェクトの WebContent ディレクトリの下に「main」という名前のフォルダーを作成し、そのフォルダー内に 2 つのサブフォルダーを作成します。 (css ファイルを保存)、img (画像を保存する)、html ファイルがメインフォルダーに配置されます。

HTML ファイルの ... 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 サイトの他の関連記事を参照してください。