css3 動的background_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 動的background_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:54:46

オリジナル

1168 人が閲覧しました

ダイナミックな背景

複数の背景レイヤーのフェードインとフェードアウトを交互に使用して、絶えず変化する背景の効果を実現します。レンダリング:

デモアドレス

手順

1. CSS の放射状グラデーションを使用して、ミラーグラデーションの背景を作成します。そのうちの 80% と 20% は、グラデーションの中心の x、y 位置です。

radial-gradient の具体的な使用法はここで見つけることができます

.dynbg__bg{    position: absolute;    top: 0px;    left: 0px;    width:100%;    height:100%;    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);}

ログイン後にコピー

オンラインコード

2. 最初の手順を繰り返して、異なるグラデーション背景を持つ 4 つの DIV を作成します。グラデーションの中心点の位置は 80% 20% 80% 80% 20% 80%20% 20%です

.dynbg__bg{    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    background-size: 100% 100%;}.dynbg__bg1{    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    z-index: 4;}.dynbg__bg2{    background:-moz-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);    z-index: 3;}.dynbg__bg3{    background:-moz-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);    z-index: 2;}.dynbg__bg4{    background:-moz-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);    z-index: 1;}

ログイン後にコピー

4 つの div の効果

3. 4 つの div を順番に重ね合わせ、 div の透明度を 1 から 0、さらに 1 に順次変更します。最後の div の透明度は変更する必要がないため、3 つの div を変更する必要があり、各 div は 2 つの状態で変化するため、合計 6 つの状態になります。 100% を 6 で割って、0%、16.6667%、33.3333%、50%、66.6667%、83.3333%、100% に分けます。さまざまな段階での各 div のステータスは次のとおりです。

@-webkit-keyframes dynbg__ani1{  0%{    opacity: 1;  }  16.6667%{    opacity: 0;  }  33.3333%{    opacity: 0;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 0;  }  83.3333%{    opacity: 0;  }  100%{    opacity: 1;  }}@-webkit-keyframes dynbg__ani2{  0%{    opacity: 1;  }  16.6667%{    opacity: 1;  }  33.3333%{    opacity: 0;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 0;  }  83.3333%{    opacity: 1;  }  100%{    opacity: 1;  }}@-webkit-keyframes dynbg__ani3{  0%{    opacity: 1;  }  16.6667%{    opacity: 1;  }  33.3333%{    opacity: 1;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 1;  }  83.3333%{    opacity: 1;  }  100%{    opacity: 1;  }}

ログイン後にコピー

次に、div クラスにアニメーション属性を追加します

.dynbg__bg{  ...  -webkit-transition:all 1s linear;  -moz-transition:all 1s linear;  ...}.dynbg__bg1{  ...  -webkit-animation:dynbg__ani1 infinite 8s;  -moz-animation:dynbg__ani1 infinite 8s;}.dynbg__bg2{  ...  -webkit-animation:dynbg__ani2 infinite 8s;  -moz-animation:dynbg__ani2 infinite 8s;}.dynbg__bg3{  ...  -webkit-animation:dynbg__ani3 infinite 8s;  -moz-animation:dynbg__ani3 infinite 8s;}.dynbg__bg4{  ...}

ログイン後にコピー

このようにして、3 つの画像が順に表示から透明に、そして再び表示に徐々に変化します。

トランジションの使用方法はこちらをご覧ください
アニメーションの使用方法はこちらをご覧ください

4. 最後に、タイル状の半透明のドットのレイヤーを上に追加してテクスチャを追加します。

.dynbg__bg0{    background-repeat: repeat;    background: -webkit-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);    background: -moz-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);    background-size: 16px 16px;    z-index: 5;}

ログイン後にコピー

オンラインコード