コメント：Sliderに関しては、過去には、CSS+JSが関連するスイッチング効果を達成するために使用されてきました。誰もがHTML5+CSS3を使用する実装方法について議論していると聞いたことがありますが、自分で実装したことはありません。 OK、今回はCSS3をプレイする時間があります。興味のある友達はもっと学ぶことができます
さて、前回はいくつかの記事をすばやく追加すると言ったが、私は冷静に予約を破った。別の月にのみ公開されていますが、これは本当に憂鬱です。最近時間を見つけることができなかったことがわかり、基本的には次々にプロジェクトを配置しました。私は自由だったときに正しいトピックを見つけることができなかったか、混乱した時間が見つかりませんでした。そこで、私は一定期間苦労してきた問題の知識ポイントを要約し、自由なときに一つ一つ勉強してから、記事に整理して共有することにしました。トピックから始めて、Sliderに言及すると、常にCSS+JSを使用して関連するスイッチング効果を実現しています。誰もがHTML5+CSS3を使用する実装方法について議論していると聞いたことがありますが、自分で実装したことはありません。 OK、今回はCSS3をプレイする時間があります。実際、私はウェイボに関するメッセージにも魅了されました。他の人によって達成された結果が非常に良いことを見て、私はそれをしたいと思っていました。
1。繁殖図
それは、過去にJSで達成された効果とそれほど違いはありませんが、全体的な感覚は非常にエレガントです。まあ、CSS3の力は、より複雑な結果を達成するためのコードをほとんど書いていないことです。ただし、この例には完璧なものもあります。 2つの写真を切り替えると、中央に写真がある場合、CSS3アニメーションの実行中にそれが表示されますが、これはそれほど強力ではありません。しかし、それについて考えてください、これは純粋なCSS3によって達成される効果です。 JSを使用して実装された複雑なHTML構造の変更はここでは見られないため、上記の効果はCSS3で単純に実装することは困難です。
2。HTML構造
<div>
<入力チェックされたtype = "Radio">
<入力型= "Radio">
<入力型= "Radio">
<入力型= "Radio">
<入力型= "Radio">
<div>
<div>
<div>
<記事>
<div>
<h1> title1 </h1>
<a href = "＃">説明1 </a>
</div>
<img src = "img/pic1.png"/>
</article>
<記事>
<div>
<h1> title2 </h1>
<a href = "＃">説明2 </a>
</div>
<img src = "img/pic2.png"/>
</article>
<記事>
<div>
<h1> title3 </h1>
<a href = "＃">説明3 </a>
</div>
<img src = "img/pic3.png"/>
</article>
<記事>
<div>
<h1> title4 </h1>
<a href = "＃">説明4 </a>
</div>
<img src = "img/pic4.png"/>
</article>
<記事>
<div>
<h1> title5 </h1>
<a href = "＃">説明5 </a>
</div>
<img src = "img/pic5.png"/>
</article>
</div>
</div>
</div>
<div>
<ラベル= "slider1"> </label>
<label for = "slider2"> </label>
<label for = "slider3"> </label>
<label for = "slider4"> </label>
<label for = "slider5"> </label>
</div>
<div>
<ラベル= "slider1"> </label>
<label for = "slider2"> </label>
<label for = "slider3"> </label>
<label for = "slider4"> </label>
<label for = "slider5"> </label>
</div>
</div>
上記のコードは主なHTML構造であり、ここではハブとして見ることができ、この例では非常に重要な役割を果たしています（これが、例でそれを隠したくない理由です。本当のヒーローは舞台裏のヒーローであってはなりません）。
以下のスライダーには、表示する必要がある画像が含まれています。ここでは、内側のマージン左を制御することで異なる画像を表示するスライドドアの効果のようです。
コントロールは、写真の左側と右側にあるスイッチング矢印です。心配しないで、なぜ5を設計する必要があるのですか？ 2つだけで十分であるようです。この例では、JSを使用して切り替えを達成しないことを思い出させてください。
最後のアクティブは、写真の下のクリックボタンです。クリックして、閲覧する画像を直接選択できます。内部の構造を豊かにして、サムネイル効果を設計することもできます。
3。CSSスタイルシート
@charset utf-8;
/* 一般 */
ボディ{背景：#DDD; OVERFLOW-X：hidden;}
#bd {width：960px;マージン：100px auto; max-width：960px;}
/ *モジュール：スライダー */
#sliders {
ボーダーラジウス：5px;
Box-Shadow：1PX 1PX 4PX＃666;
パディング：1％;
背景：#ffff;
}
＃オーバーフロー{
幅：100％;
オーバーフロー：隠し;
}
#sliders .inner {
幅：500％;
トランジトン：すべて1S線形。
-Webkit-Transition：すべて1S線形。
}
#slidersの記事{
フロート：左;
幅：20％;
}
#sliders article .info {
位置：絶対;
不透明：0;
パディング：30px;
色：＃666;
フォントファミリー：arial;
遷移：不透明度0.1sの容易さ。
-webkit-transform：translatez（0）;
-webkit-transition：不透明度0.1s容易さ。
}
#sliders article .info H1 {
フォントサイズ：22px;
font-weight：bold;
マージン：0 0 5px;
}
#sliders article .info a {
色：＃666;
テキスト装置：なし;
}
/ *モジュール：コントロール */
#controls {
高さ：50px;
幅：100％;
マージントップ：-25％;
}
#controlsラベル{
表示：なし;
幅：50px;
高さ：50px;
不透明：0.3;
カーソル：ポインター;
}
#controlsラベル：Hover {
不透明：1;
}
/ *モジュール：アクティブ */
＃アクティブ{
幅：100％;
マージントップ：23％;
テキストアライグ：センター;
}
＃アクティブラベル{
ディスプレイ：インラインブロック。
幅：10px;
高さ：10px;
ボーダーラジウス：5px;
背景：#BBB;
ボーダーカラー：＃777;
}
＃アクティブラベル：Hover {
背景：#ccc;
}
/ *チェックされた変更スタイルを入力 */
＃slider1：checked〜＃activeラベル：nth-child（1）、
＃slider2：checked〜＃activeラベル：nth-child（2）、
＃slider3：checked〜＃activeラベル：nth-child（3）、
＃slider4：checked〜＃activeラベル：nth-child（4）、
＃slider5：checked〜＃activeラベル：nth-child（5）{
背景：＃333;
}
＃slider1：checked〜＃controlsラベル：nth-child（5）、
＃slider2：checked〜＃controlsラベル：nth-child（1）、
＃slider3：checked〜＃controlsラベル：nth-child（2）、
＃slider4：checked〜＃controlsラベル：nth-child（3）、
＃slider5：checked〜＃controlsラベル：nth-child（4）{
表示：ブロック;
フロート：左;
背景：url（../ img/prev.png）繰り返し;
マージン左：-70px;
}
＃slider1：checked〜＃controlsラベル：nth-child（2）、
＃slider2：checked〜＃controlsラベル：nth-child（3）、
＃slider3：チェック済み〜#controlsラベル：nth-child（4）、
＃slider4：checked〜＃controlsラベル：nth-child（5）、
＃slider5：checked〜＃controlsラベル：nth-child（1）{
表示：ブロック;
フロート：そうです;
背景：url（../ img/next.png）no-repeat;
マージン右：-70px;
}
＃slider1：checked〜＃sliders記事：nth-child（1）.info、
＃slider2：checked〜＃slidersの記事：nth-child（2）.info、
＃slider3：checked〜＃sliders記事：nth-child（3）.info、
＃slider4：checked〜＃slidersの記事：nth-child（4）.info、
＃slider5：checked〜＃slidersの記事：nth-child（5）.info {
不透明：1;
遷移：0.6sすべてが1秒でした。
-webkit-transition：すべての0.6sが1秒でした。
}
＃slider1：checked〜＃sliders .inner {
マージン左：0;
}
＃slider2：checked〜＃sliders .inner {
マージン左：-100％;
}
＃slider3：checked〜＃sliders .inner {
マージン左：-200％;
}
＃slider4：checked〜＃sliders .inner {
マージン左：-300％;
}
＃slider5：checked〜＃sliders .inner {
マージン左：-400％;
}
OK、上記のCSSコードは本当に複雑で複雑であることを認めますが、それは本当に非常に見事な効果を達成し、それを書き終えたとき、私はCSS3の巨大な魔法にも感銘を受けました。 。 。
この前半のコードは、主にスライダーの構造を設計するために使用されます。これには、丸みを帯びた角や影の美化デザインなどがあります。後半には、主にいくつかのアニメーション効果が含まれており、写真を切り替えたりコントロールボタンを切り替えるときに動的な効果を実現します。ただし、最も重要なことは、画像スイッチングの機能を本当に実現する下部CSS3セレクターの使用です。これは、過去にCSS3を学習する際に私が無視したものだからです。 CSS3の強力なのは丸みを帯びた角、影、変形、アニメーションであると常に考えていますが、このコードは、セレクターがCSS3でどれほど重要であるかを実際に示しています。いくつかの複雑なロジックでは、これらのCSS3セレクターを使用すると、想像を絶する効果を達成できます。
4。スライダー実装の原則
上記のコードを最初に読み終えたとき、あなたは最初に行ったのと同じでなければなりません。そのようなコードがスライダーの効果を達成できるとは思いません。
OK、実装の原則を分析させてください。
上で言ったように、トップラジオグループは非常に重要であり、スライダーの実装のハブです。はい、本当にそうです。
スライダーを実装するには、スイッチングには2種類しかありません。つまり、コントロールボタンをクリックすると、画像が切り替えられます。同時に、画像を切り替えるときは、すべてのコントロールボタンが正しく表示されていることを確認してください。
この例では、ラベルをコントロールボタンとして使用し、記事には画像が含まれており、内側が画像のコンテナとして含まれています。
簡単に考えるだけで、ラベルと記事を接続することはできません。ラベルステータス情報は、記事の選択を反映するのが困難です。ラベルのスイッチング状態を記録できるものがない限り、対応する順序で画像を選択して、何らかの手段で表示します。
さて、今、あなたはそのラジオグループがスライダーを実装するための鍵である理由を理解しています。はい、ラベルのクリックステータスを記録しているようです。
属性のラベルを使用して、対応する無線に対応します。ラベルがクリックされると、対応する無線がチェックされます。次に、強力なCSS3セレクターを介して内側を左に移動して、対応する画像を表示します。もちろん、対応する左および右の選択ボタンもセレクターを介して表示されます。同様に、左と右のボタンがクリックされると、この方法でも5つの選択ボタンのステータスも実現します。
上記の実装の原則は比較的簡単です。実際、コントロールボタンのクリックステータスを記録できる限り、セレクターを介してスライダー効果を達成できます。
ラジオグループがそれを行うことができるだけでなく、A：Hoverは、このアイデアに従ってホバー時に画像スイッチングを実装することもできます。もちろん、実装の原則を理解している限り、他にも多くの実装方法があります。
5。概要
実際、CSS3は本当に楽しく、多くの効果があります。 CSS3では、予期しない結果しかありませんが、不可能ではありません。 CSS3を書くには少し賢さが必要であることがわかり、時にはいくつかの絶妙な実装方法が本当に賞賛に値することがわかります。
まあ、小さな慣行として、この例は多くのことを得ています。特に強力なセレクターは、過去にそれを無視したことを恥ずかしく思います。 。 。
また、不連続な画像切り替えの問題を考慮する必要があります。私は支援するために少しJSを使用しなければならないようです。
OK、結果があれば共有しましょう。