シームレスなカルーセル切り替えを実現する Css メソッド: まず、アニメーション属性を使用して、セレクターにバインドされるキーフレームの名前、アニメーションの完了にかかる時間、アニメーションの速度曲線、およびアニメーションの再生回数、次に @keyframes ルールを使用してカルーセル アニメーションを作成し、各キーフレームでの画像の配置スタイルを指定します。
このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。
(推奨チュートリアル: CSS ビデオ チュートリアル )
CSS3 を使用して実装: アニメーション属性 @keyframes ルールを使用
(カルーセルを 1 つずつ実装し、肉眼では 1 つの画像のみが表示されます)
HTML 部分は比較的単純で、2 つの div の下に複数の img タグがラップされています。シームレスなカルーセルを実現するには、次の点に注意してください。最初の画像。最後の画像と同じ;
<div class="out"> <div class="imgs"> <img src="/static/imghwm/default1.png" data-src="img/beatuy.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/child.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/girl.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/milk.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/cup.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/dog.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > <img src="/static/imghwm/default1.png" data-src="img/beatuy.jpg" class="lazy" / alt="CSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?" > </div> </div>
最も外側の div は ovflow:hidden;position:相対で設定されます。最も外側の div はposition:relativeで設定されているため、内側の div を設定する必要があります位置:absolute; を使用すると、移動は親要素に対して相対的になります;
CSS コードは次のとおりです:
.out{ width: 200px; height: 100px; overflow: hidden; position: relative; } .imgs { width: 1400px; height: 100px; position: absolute; animation: ppt 10s linear infinite; } img { float: left; width: 200px; height: 100px; } @keyframes ppt { 0% { left: 0px } 20% { left: -250px } 40% { left: -500px } 60% { left: -750px } 80% { left: -1000px } 100% { left: -1200px } }
このようにして、画像を回転できます。
しかし、マウスをその上に置くと、画像はまだ回転しています。マウスを画像上に置いたときにカルーセルを停止したり、何らかの情報を表示したりする場合は、次のようにします。アニメーションのステータスを設定するには、「hover;」を追加する必要があります。コードは非常に単純です: 次のようにです。
.out:hover .imgs{ animation-play-state:paused; }
これにより、カルーセル効果が表示されます;
プログラミング学習 をご覧ください。 !
以上がCSS を使用してシームレスなカルーセル切り替えを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

先日、この質問がありました。私の最初の考えは、奇妙な質問です!特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか?

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

CSSやJavaScript(および画像とフォントなど)などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか?名前などのように。それはまさにそのためのものです。たくさんあります

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています(その名前とURLが大好きです!)。私はこれまでスイスに行ったことがないので、興奮しています

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

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

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
