css3 雲のはためきエフェクトanimation_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 雲のはためきエフェクトanimation_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:15:53

オリジナル

2493 人が閲覧しました

最初にコードを投稿します:

css部分:

@-webkit-keyframes fadeIn {

0% {

opacity: 0.2;width:100%; /*初期状態の透明度は0.2、サイズは100%です* /

) ;

}

30% {

不透明度: 0.5;幅: 115%;

}

40%{

不透明度: 0.6;幅: 125%; }

50 % {

opacity：0.7; width：130％;

}

60％{

opacity：0.8; width：135％;

}

70％{

7;幅：140％;

}

80%{

不透明度: 0.6;幅: 145%;

}

90%{

不透明度: 0.4;幅: 150%;

}

100% {

不透明度: 0. 3;width: 155%; /*終了状態の透明度は 0.3 で、サイズは 155% に拡大されます*/

}

.sae{

-webkit-animation -name: fadeIn; /*アニメーション名*/

-webkit-animation-duration: 2s; /*アニメーション期間*/

-webkit-animation-iteration-count: /*アニメーション数*/

-webkit-animation-delay: 0s; /*遅延時間*/

}

.sae1{

-webkit-animation-name: fadeIn /*アニメーション名*/

-webkit-animation-duration: 2s ; /*アニメーション時間*/

-webkit -animation-iteration-count: 無限; /*アニメーション数*/

-webkit-animation-delay: 3s; /*遅延時間*/

}

.sae2 {

-webkit-animation-name: fadeIn ; /*アニメーション名*/

-webkit-animation-duration: 2s; /*アニメーション期間*/

-webkit-animation-iteration-count: /*アニメーション数*/

-webkit-animation -delivery: 5s; /*遅延時間*/

}

.sae3{

-webkit-animation-name: fadeIn; /*アニメーション名*/

- webkit-animation-duration: 2s; /*アニメーション時間*/

-webkit-animation-iteration-count: /*アニメーション数*/

-webkit-animation-delay: /*遅延時間* /

}

html 部分:

css3 雲のはためきエフェクトanimation_html/css_WEB-ITnose

効果:

使用PC のスクリーンショット、雲が大きすぎるように見えます

説明:

最初は CSS 部分です

@-webkit-keyframes fadeIn この部分は CSS アニメーションです

トゥイーンアニメーションを制御します。パーセンテージ

私がやっていることは、エフェクトの後ろから浮かび上がる雲です。

それで私のトゥイーンアニメーション

Yuncong は透明で小さい -- 「明らかに大きい --」より透明です

画面上のフローティングアニメーションが行き詰まっていると感じる場合は、より多くのトゥイーン時間を作成し、アニメーションの長さを調整することができますよりスムーズにします。

.sae{

-webkit-animation-name: fadeIn; /*アニメーション名*/

-webkit-animation-duration: 2s; /*アニメーション期間*/

-webkit-animation-iteration-count :無限; /*アニメーションの数: 無限ループ*/

-webkit-animation-delay: 0s; /* 遅延時間*/

}

アニメーションを引用し、アニメーションパラメーターを設定します。

複数の雲があるため、雲を速くしたり遅くしたりするには、異なるパラメータを設定する必要があります

遅延により雲がよろめきます

雲の位置が設定されている場合でも、html 部分は、雲の写真

欲しいから雲が絶えず飛んでいるようなエフェクトがあるので、複数の雲の画像を追加し、位置をずらしてあります。

以下に雲の PNG 写真を添付します

雲が上にあります。右クリックして保存