アニメーション属性はカルーセル メソッドを直接実装します。
今回はアニメーション属性を使ってカルーセルを直接実装する方法をお届けします。カルーセルを実装するためのアニメーション属性の注意点とは何ですか。実際のケースを見てみましょう。
アニメーションの紹介:
CSS3 のアニメーション属性を使用して、キー フレームを制御することでアニメーションの各ステップを制御し、Flash アニメーションと同様に、より複雑なアニメーション効果を実現できます。アニメーションによって実現されるアニメーション効果は主に 2 つの部分で構成されます: 1) Flash アニメーションと同様のフレームを通じてアニメーションを宣言します。2) アニメーション属性のキー フレームによって宣言されたアニメーションを呼び出します。アニメーション属性値:
アニメーション属性は短縮属性です 構文: アニメーション: 名前、期間、タイミング-関数、遅延、繰り返し-数方向;
アニメーションは、6 つのアニメーション属性を設定します:
animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。値: none: (デフォルト) アニメーション効果を指定しません (カスケードからのアニメーションをオーバーライドするために使用できます)。 keyframename: セレクターにバインドする必要があるキーフレームの名前を指定します。 animation-duration: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。値: time: アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。 animation-timing-function: アニメーションのスピードカーブを指定します。値: 緩和: デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。 リニア: アニメーションの速度は最初から最後まで同じです。 イーズイン: アニメーションは低速で始まります。 イーズアウト: アニメーションは低速で終了します。 イーズインアウト: アニメーションは低速で開始および終了します。 cubic-bezier(n,n,n,n): cubic-bezier 関数で独自の値を定義します。取り得る値は0から1までの数値です。 animation-delay: アニメーションが開始するまでの遅延を指定します。値: time: (オプション) アニメーションを開始するまでの待機時間を秒またはミリ秒で定義します。デフォルト値は 0 です。 animation-iteration-count: アニメーションを再生する回数を指定します。値: n: アニメーションの再生回数を定義する値。 infinite: アニメーションを無限に再生することを指定します。 animation-direction: アニメーションを順番に逆方向に再生するかどうかを指定します。値: normal: デフォルト値。アニメーションは正常に再生されるはずです。 代替: アニメーションは順番に逆方向に再生されます。 アニメーションアニメーションカルーセル画像<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<style type="text/css">
p,img{
margin: 0;
padding: 0;
}
.p_first{
width: 1000px;
height: 300px;
margin-top: 100px;
margin-left: 250px;
overflow: hidden;
}
.p_second{
width: 4000px;
position: relative;
animation: myimg 12s linear infinite normal;
}
@keyframes myimg{
0{
left: 0;
}
5%{
left: 0;
}
30%{
left: -1000px;
}
35%{
left: -1000px;
}
60%{
left: -2000px;
}
65%{
left: -2000px;
}
95%{
left: -3000px;
}
100%{
left: -3000px;
}
}
</style>
</head>
<body>
<p class="p_first">
<p class="p_second">
<img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
</p>
</p>
</body>
</html>画像タグは同じ行に配置する必要があります。そうしないと、画像の間に隙間ができます。
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がアニメーション属性はカルーセル メソッドを直接実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7557
15
1384
52
83
11
28
96
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?
Mar 24, 2024 am 11:27 AM
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に
Java を使用して愛のアニメーションを実装するコードを作成する
Dec 23, 2023 pm 12:09 PM
Java コードによる愛のアニメーション効果の実現 プログラミングの分野では、アニメーション効果は非常に一般的で人気があります。 Java コードを使用してさまざまなアニメーション効果を実現できますが、その 1 つがハートのアニメーション効果です。この記事では、Java コードを使用してこの効果を実現する方法と、具体的なコード例を紹介します。ハートのアニメーション効果を実現する鍵は、ハートの形を描き、ハートの位置や色を変えることでアニメーション効果を実現することです。簡単な例のコードは次のとおりです: importjavax.swing。
PHP プログラミング ガイド: フィボナッチ数列を実装する方法
Mar 20, 2024 pm 04:54 PM
プログラミング言語 PHP は、さまざまなプログラミング ロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
開発に関する提案: ThinkPHP フレームワークを使用して非同期タスクを実装する方法
Nov 22, 2023 pm 12:01 PM
「開発に関する提案: ThinkPHP フレームワークを使用して非同期タスクを実装する方法」 インターネット技術の急速な発展に伴い、Web アプリケーションには、多数の同時リクエストと複雑なビジネス ロジックを処理するための要件がますます高まっています。システムのパフォーマンスとユーザー エクスペリエンスを向上させるために、開発者は多くの場合、電子メールの送信、ファイルのアップロードの処理、レポートの生成など、時間のかかる操作を実行するために非同期タスクの使用を検討します。 PHP の分野では、人気のある開発フレームワークとして ThinkPHP フレームワークが、非同期タスクを実装するための便利な方法をいくつか提供しています。
Golang がゲーム開発の可能性を可能にする方法をマスターする
Mar 16, 2024 pm 12:57 PM
今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲーム システムの構築に使用されます。
PHP ゲーム要件実装ガイド
Mar 11, 2024 am 08:45 AM
PHP ゲーム要件実装ガイド インターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。
Golangで正確な除算演算を実装する方法
Feb 20, 2024 pm 10:51 PM
Golang で正確な除算演算を実装することは、特に財務計算を含むシナリオや高精度の計算が必要なその他のシナリオでよくあるニーズです。 Golang の組み込みの除算演算子「/」は浮動小数点数に対して計算されるため、精度が失われる場合があります。この問題を解決するには、サードパーティのライブラリまたはカスタム関数を使用して、正確な除算演算を実装します。一般的なアプローチは、math/big パッケージの Rat タイプを使用することです。これは分数の表現を提供し、正確な除算演算を実装するために使用できます。
