そのチュートリアルに戻って次のステップはC-s私たちの仕事を始めることです。
したがって、新しいC S Sファイルとパブリックスタイルシートを作成して呼び出す必要があります。
その成功。
だから私たちがここに戻ってきたら、パブリックディレクトリに移動します。すでに開いているようなスタイルシートが開いています。新しいファイルを作成するには右クリックしてください。
Blandingはそうだ。
今、私がそれを開いたら、それは空白で、私たちのメインページをスタイルするすべてのルールで記入する準備が整いました。
だから、ここで最初にやってみたいのは、私たちがやったDanciuの言うことを学ぶオープンな学習です。
また、ボディの背景色をブロックに設定したいと考えています。
好きな色を選ぶことができます。
私はちょうど黒い背景から最初のイメージにフェードインしてそこからクロスフェードを始めるのがいいと思う。
このルールに貼り付けたのは、bodyタグを選択してから色をハッシュに設定することです。
黒と同じ0 0 0。
だから私はすべての文脈の位置を必要とし、私たちが持っているすべてのキャンプ場をIDで選択するのを見る。
そこで、IDセレクタを使用してBlandingダッシュヘッダを使用します。
ここで行ったことは、このテキストを取り上げてzインデックスを1にしたことです。
ですから、あなたがzインデックスについて知らなければ、基本的にウェブページは3次元平面上で見ることができます。
私たちはXとYを上下左右に持っていて、そしてZを前方と後方に向かって宇宙に持っています。
だから1のzインデックスを与えると、それは私たちに向かって来ている。
静的な静的以外のものから位置を変更しなければならないzインデックスを使用できるように、zインデックスが1より小さい他のコンテンツの上にレイヤーを重ねると、すべてのHTML要素のデフォルトの位置の値になります。
そして静的を使うと、実際にはzのインデックスは無視されます。
今私たちがやりたいことは、そのテキストとボタンを中心にすることです。
だから私はここでテキスト整列の中心を使用して、それは私たちを水平に中心に置くでしょう。
今、私たちがページ上で垂直方向に引くためには、実際にはこれを行う方法がたくさんありますが、最も簡単な方法はビューの高さを使うことだけです。
ここでは、パディングの高さを40の高さに設定します。
私が50歳で遊んでいない理由は、それが実際にコンテンツをより低く抑えるからです。
そして、それは中心にあるように見えます。
そこで、このルールをここに戻って保存して、リフレッシュすると、背景が黒く、下が見えます。
うん。
ここで更新できるようにするには、テキストをページの中央に配置できません。
少し良く見てください。
だから、あなたのキャンプのテキストへようこそはほとんど見えないので、ここでそれを1秒で変更します。
そして、着陸ヘッドやSlichterにH1セレクターを追加し、色を1に変更するように見えます。
それではここに追加して、ページをリフレッシュしてテキストを見るのがはるかに簡単になると言うでしょう。
私たちがそこに背景を置くと、それを見るのがより簡単になります。
だから次は、順序付けされていないリストをスタイルすることです。
リストにはスライドショーのクラスがあることを知っているので、スライドするのはとても簡単です。
だから私はこのルールを取って、ここでそれを接続します。
だから私たちはそのクラスで名誉のない人を選んだのです。高さ内に置かれた位置を100％に設定して、ページ全体を取り上げてから、トップレベルの位置を使ってページの左上隅に移動しますゼロの
そして、ここに見れば、zインデックスはゼロに設定されています。
これは、私たちのビューやキャンプ場であなたのテキストを歓迎しているような背景の画像が他のコンテンツの背後にあることを確認します。
リストスタイルを設定します。
そして、この戦争で弾丸はそのように指摘します。
我々はリスト項目からそれらを見ていない。
最後に、マージンやパディングがないことを確認する必要があります。
そこで、これらを両方ともゼロに設定します。
今我々はここに戻って保存し、我々は新鮮だった。
ここの左手にある弾丸が消えているのが分かります。
今度は実際に個々のリスト項目のスタイルを設定する必要があります。
だから私たちはここにこのルールを引っ張り出してコピーします。Intourist
SSはそれを非ルーテッドリストの下に貼り付けます。ここでは名誉リストのクラスセレクタのスライドショーと同じドットをつけていますリスト内の各リスト項目を選択するには、もう一度幅と高さを100％に設定します。
今回は絶対上端と左端のどちらかに設定するか、バックグラウンドサイズを0に設定してカバーします。
そして、これはイメージがページのスペース全体を占めるようにするものです。
私たちはまた、50パーセント50％に私たちのバックポジションを設定します。
そして、これは画像をページ上に完全に集中させます。
最後に、私たちはバックグラウンドを何も繰り返さないようにしました。
これは、画像が縦方向または横方向に繰り返されない場所です。
私たちは、不透明度をゼロに設定します。なぜなら、画像をフェードアウトさせたいからです。ここで作成するアニメーションを少しずつゆっくりとフェードアウトして1の不透明度にします。
私たちはzインデックスをゼロに設定しましたが、これはバックグラウンド画像がテキストとボタンの後ろに配置されるようにします。
私たちがここに持っている最後のプロパティはアニメーションと呼ばれています。これはこれまで見たことのないものです。
これは実際に画像をフェードインまたはフェードインさせることになります。
したがって、アニメーションの名前はイメージアニメーションです。これは分単位でここで作成するアニメーションと一致する限り任意のものを呼び出すことができ、アニメーションを50秒間持続するように指示します。
それが線形であることを確認し、線形の意味はアニメーションが最初から最後まで同じスピードであることを示すことです。
最後に、アニメーションを無限にループするように指示します。
そうすれば、私たちのスライドショーは決して終わらない。
だから私たちはこれを言うことができますが、プレビューすればまだアニメーションが設定されていないので、何も表示されません。
また、個々のリスト項目に画像が設定されていない。
さあ、今すぐやってみましょう。
そこで、スライドショーリストのすべてのアイテムを子セレクタにコピーし、実際のリストアイテムにバックグラウンドイメージを追加します。
だから今、私たちは、5つまでのすべての方法を行っている子供1つから始まる5つのリスト項目があることがわかります。
それぞれの人に背景画像を与え、必要に応じてこれらの地元の人々にリンクしたり、パブリックディレクトリ内の画像を画像ディレクトリ内に置くことができます。
私は先に進み、画像を使ってアップロードするか、これはウェブ上の無料のアップロードサービスです。
実際にあなたのWebサイトで使用するイメージのホスティングを意図したものではありませんが、手元にある簡単な修正です。
最初の背景画像のアニメーションはすぐに開始されます。
したがって、アニメーションの遅延を与える必要はありません。
前の画像の10秒後に各画像がフェードインされるようにします。
そこで私は、次の画像アニメーションの遅延を10秒に設定し、その後、すべての画像について10ずつ増やします。
したがって、3回目は30秒間、3回目は30秒間、4回目は40秒間、20秒間は50秒間続き、画像1で再び開始します。
CSSAファイルで着陸を宣言することもできますが、すべての部分がゼロに設定されているため、アニメーションを1つにフェードインするように設定していないため、まだ何も見ません。
だから先に進んでください。
そこで、チュートリアルのキーフレーム画像アニメーションルールをコピーして、ここに貼り付けます。
そこで、私たちがやっているのは、フレームセレクタを使ってアニメーションにイメージアニメーションの名前を付けることです。
これは、スライドショーのアニメーションプロパティの以前の値と一致します。これはスライドルールです。
だから私たちがやることは、アニメーション内のさまざまなキーフレームで何が起こりたいのかを示すことです。
したがって、アニメーションは0％から100％まで変化しますが、我々は0％から30％のみに関心があります。
ここで何が起きるかは、不透明度のアニメーションを0にしてから10％までアニメーションを開始することです。
私たちはそれを宇宙に消えさせます。
不透明度を20％まで1つ残しておき、30％で0に戻すことができます。
また、プロパティのアニメーションタイミング関数が0から10まで緩やかに設定されていることがわかりました。その後、アニメーションタイミング機能も緩和されます。
これにより、0から1に落ち着くように、より滑らかな遷移が得られます。
だから、あなたがこれらのパーセンテージをどこに思いついたのか疑問に思うかもしれません。
そこで、私は先に進み、ここで起こっていることをよりよく視覚化するのに役立つアニメーションのグラフを作成しました。
したがって、基本的には、0秒から10秒までアニメーション化されるイメージがあり、次に2番目のイメージは10から20になります。
20から30までの3番目と30から40まで、そして40から50まではそれぞれ10秒で5つの画像を作ります。
したがって、0秒から10秒までは5秒のフェーデンがあり、次に1の不透明度でフェードインされた画像を取得し、10秒から15秒にフェードインして次の画像にフェードインします。
これは赤で消えている青で表現することができます。青は赤で消え、次に消えてオレンジ色になります。
そのため、最初の画像は0％から10％になり、0秒から5秒にフェージングされ、10％から20％まで堅調に維持されます。
だから、あなたはペースト状のペースト状のものの10〜20％を持っていることがわかります。
そして、20％から30％へと、実際には1％から0％に減少しています。
そしてそれが起こっているので、アニメーションがすでに10秒で始まっている次のイメージは、0から1の10から15になるでしょう。
そして、それがここで重なり合い、このクロスフェード効果を作り出します。
これは5秒間安定していて、次にフェードアウトすると次の画像がフェードインし、同じパターンがアニメーションの最後である50秒になるまで繰り返されます。
この画像は堅実です。
そして、元の画像がぼやけてしまい、5枚目の画像がぼんやりと消えてから、何度も繰り返し始まり、無限にループするように、元に戻って行きます。
だから私たちの米国を救い、ウェブカメラを開こうとしましょう。
サーバーが稼働していることを確認して、アニメーションをライブで見ることができます。
この画像は5秒間表示され、次の画像がフェードインするとフェードアウトします。
それは5秒の移行です。
私たちはこの写真の5秒以上を取得し、次の写真にフェードアウトします。
だから最後にしたいのは、私たちの背景スライダがすべてのブラウザで動作することを確認することです。
そこでチュートリアルの最後に、ここでは私はこのルールを持っています。
あなたの成功にそれを戻してください。
下に貼り付けると、古いCSSのアニメーションをサポートしていない古いブラウザがあることがわかります。Klownsはモダナイザによって追加されています。すでに近代化CDがありました。私は最初のCDRを選んだ。
だから私はちょうどファイルのバージョンをコピーして終了し、私は頭の中のスクリプトタグにそれを追加し、私はこのJavaScriptがページ上の他の資産と同時に吹くようにする同期にスクリプトを設定します。
CSSAに戻ると、容量が1に設定されていることがわかります。
ここで何が起きるかは、システムインテグレーションをサポートしていないブラウザでは、スライドが1つしか表示されず、その画像の背景になります。
それはフルスクリーンの背景画像スライダーのためです。
ちょうど今のような質問があれば、私は次のビデオを見るでしょう。
ありがとう。