さて、前回、できるだけ早くいくつかの記事を埋め合わせると言いましたが、平気で約束を逃してしまいました。記事を投稿してからほぼ1か月が経ちましたが、本当に憂鬱です。最近は基本的に次から次へとプロジェクトが決まっていて、暇なときに適切なテーマが見つからなかったり、テーマが詰まっていると時間が取れなかったりします。 。そこで、私が一定期間悩んできた問題についての知識をまとめ、時間のあるときに一つ一つ深く勉強し、記事にまとめて共有することにしました。
本題に入りますが、スライダーに関しては、これまでは、関連する切り替え効果を実現するために CSS と JS が使用されてきました。 html5 css3 を使った実装について皆さんが議論していると聞きましたが、私自身は実装したことがありません。さて、今回は css3 をいじる時間があります。実際、私も Weibo のメッセージに惹かれ、他の人が達成した素晴らしい結果を見て、自分もやってみたいという衝動に駆られました。
1. レンダリング
以前の js で実現した効果とあまり変わりませんが、全体的な雰囲気は非常にエレガントです。 CSS3 の強みは、非常に少ないコードを記述するだけで比較的複雑な効果を実現できることです。ただし、この例も完璧ではありません。2 つの画像を切り替える場合、中央に画像がある場合、CSS3 アニメーションの実行中にその画像が表示されるため、比較的効果がありません。しかし考えてみてください、これは純粋な css3 によって実現される効果であり、js で実装された複雑な html 構造の変更はここでは見られないため、上記の効果は単純に css3 だけで実現するのは困難です。
2. HTML 構造 >
上記のコードは、入力ラジオ グループを含むメインの HTML 構造です。この例では、これが重要な役割を果たしています (これが非表示にしたくない理由です。本当のヒーローは舞台裏にいるべきではありません)。
下のスライダーには表示する必要のある画像が含まれており、内側の余白を制御することでさまざまな画像を表示できます。
コントロールは、画像の左側と右側にある切り替え矢印です。なぜ 5 つデザインする必要があるのかについては心配しないでください。念のため言っておきますが、2 つだけで十分です。この例では js を使用してスイッチングを実装します。
最後にアクティブになるのは、画像の下にある小さなクリック ボタンです。クリックすると、閲覧したい画像を直接選択して、サムネイル効果をデザインすることもできます。
3. CSS スタイル シート
/* common */
body{background: #ddd;overflow-x: hidden;}
#bd{width: 960px;margin : 100px auto ;max-width: 960px;}
/* module: sliders */
#sliders{
border-radius: 5px;
box-shadow: 1px 1px 4px #666; 🎜>パディング: 1%;
背景: #fff;
}
#overflow{
幅: 100%;
#sliders inner{
width: 500%;
transiton: すべて 1 のリニア;
-webkit-transition: すべて 1 のリニア;
#sliders 記事{
float: left; 🎜>幅 : 20%;
}
#sliders 記事 .info{
不透明度: 0;
カラー: #666; 🎜>フォントファミリー: Arial;
トランジション: 不透明度 0.1 秒イーズアウト;
-webkit-transform: 不透明度 0.1 秒; >}
#sliders 記事 .info h1{
font-size: 22px;
font-weight: 太字
margin: 0 0 5px;
#sliders 記事 . info a{
color: #666;
text-decoration: none;
}
/* モジュール: コントロール */
高さ: 50px;幅: 100 %;
マージントップ: -25%;
#controls label{
幅: 50 ピクセル;
>不透明度: 0.3;
カーソル: ポインタ;
}
#controls label:hover{
不透明度: 1;
}
/* モジュール: アクティブ */
# active{
width: 100%;
margin-top: 23%;
#active label{
display: inline-block; 🎜>幅: 10px;
高さ: 10px;
背景: #bbb;
#777; :hover{
background: #ccc;
}
/* 入力チェック済み変更スタイル */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active label:nth-child(5){
background: #333;
}
#slider1:checked ~ #controls label:nth-child(5 )、
#slider2:checked ~ #controls label:nth-child(1)、
#slider3:checked ~ #controls label:nth-child(2)、
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
表示: ブロック;
フロート: 左;
背景: url(. ./img /prev.png) no-repeat;
margin-left: -70px;
#slider1:checked ~ #controls label:nth-child(2),
#slider2 :checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
表示: ブロック;
フロート: 右;
背景: url(../img/next.png ) no-repeat;
margin-right: -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 ~ #slidersarticle:nth-child(5) .info{
opacity: 1;
transition: すべて 0.6s イーズアウト 1s;トランジション: すべて 0.6 秒イーズアウト 1 秒;
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
マージン左: -100%;
}
#slider3:checked ~ #sliders .inner{
マージン左: -200%;
# slider4:checked ~ #sliders .inner{
margin-left: -300%;
#slider5:checked ~ #sliders .inner{
margin-left: -400%; >}
上記の CSS コードは本当に量が多くて複雑であることは認めますが、非常に素晴らしい効果が得られます。書き終えたとき、CSS3 の巨大な魔法に感銘を受けました。 。 。
ここでのコードの前半は、主にスライダーの構造を設計するために使用され、丸い角や影などの美しいデザインが含まれています。後半は主に、画像の切り替えやコントロール ボタンの切り替え時にダイナミックな効果を実現するためのアニメーション効果です。ただし、最も重要なことは、画像切り替え機能を実際に実現する下部の css3 セレクターの使用です。この例ではセレクターが非常に重要な役割を果たしていると本当に思います。なぜなら、これは私が過去に CSS3 を学習したときに無視していたものだからです。 CSS3 の強みは角丸、影、変形、アニメーションだと常々感じていましたが、このコードは CSS3 においてセレクターがいかに重要であるかを示しています。一部の複雑なロジックでは、これらの CSS3 セレクターを使用すると、想像を絶する効果が得られる場合があります。
4. スライダー実装の原則
上記のコードを初めて読んだとき、あなたも最初は私と同じように、そのようなコードでスライダーの効果が得られるとは信じないはずです。
それでは、実装原理を分析しましょう。
上で、トップのラジオ グループが非常に重要であり、スライダー実装のハブであると述べました。はい、本当にそうです。
スライダーを実装するには、2 種類の切り替えを実現する必要があります。コントロール ボタンをクリックすると同時に画像が切り替わり、画像が切り替わるときにすべてのコントロール ボタンが正しく表示される必要があります。 。
この例では、ラベルをコントロール ボタンとして使用し、article に画像が含まれ、inner が画像のコンテナとして機能します。
簡単に言うと、ラベルと記事を結び付ける方法がなく、ラベルのステータス情報が記事の選択に反映されることは困難です。ラベルの切り替え状況を記録し、それに応じた順番で画像を選択して表示する機能があれば別ですが。
さて、ラジオ グループがスライダーの実装の鍵となる理由がわかりました。はい、ラベルのクリック状態を記録しているようです。
ラベルの for 属性を使用してラベルを対応するラジオに関連付けます。ラベルをクリックすると、対応するラジオがチェックされます。次に、強力な CSS3 セレクターを使用して内側を左に移動し、対応する画像を表示します。もちろん、セレクターには対応する左右の選択ボタンも表示されます。同様に、左右のボタンをクリックすると、以下の5つの選択ボタンの状態も実装されます。
上記の実装原理は、実際には、コントロール ボタンのクリック状態を記録できる限り、セレクターを通じてスライダー効果を実現できます。
radio グループを使用できるだけでなく、a:hover もこのアイデアに従って、a がホバリングしているときに画像を切り替えることができます。もちろん、実装の原理を理解していれば、他にも実装方法はたくさんあります。
5. まとめ
実は CSS3 はとても楽しくて、CSS3 では想像できないような効果がたくさんあります。 CSS3 を書くにはちょっとした賢さが必要だと実感することもあれば、絶妙な実装方法が本当に素晴らしいこともあります。
そうですね、ちょっとした練習として、この例は特に強力なセレクターについて多くのことを学びましたが、これまで無視しすぎていたことが恥ずかしくなってきました。 。 。
不連続な画像の切り替えの問題についてはまだ考慮する必要があります。これを支援するにはいくつかの js を使用する必要があるようです。
わかりました。結果が出たら共有します。

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版
便利なJavaScript開発ツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール
