CSS アニメーション ガイド: 揺れるエフェクトを作成する方法をステップごとに説明します
CSS アニメーション ガイド: 揺れる特殊効果を作成する方法を段階的に説明します
Web デザインにおいて、アニメーション効果はユーザー エクスペリエンスを向上させる重要な要素の 1 つです。そしてユーザーの注目を集めます。 CSS アニメーションは、純粋な CSS を使用してアニメーション効果を実現するテクノロジーです。今日は、Web ページをより鮮やかで興味深いものにするために、見事な揺れ効果を作成する方法を段階的に説明します。
まず、基本的な HTML 構造を作成しましょう。コードは次のとおりです。
<!DOCTYPE html> <html> <head> <title>CSS动画指南</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"></div> </body> </html>
次に、関連するスタイルとアニメーションの定義を CSS ファイル (ここでは style.css とする) に追加する必要があります。コードは次のとおりです。
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: shake 0.5s infinite;
}
@keyframes shake {
0% {
transform: translate(0);
}
25% {
transform: translate(-10px, -10px);
}
50% {
transform: translate(10px, 10px);
}
75% {
transform: translate(-10px, -10px);
}
100% {
transform: translate(0);
}
} 上記のコードでは、0.5 秒のアニメーション効果を .box 要素に追加し、アニメーション名を shake に設定します。次に、@keyframes キーワードを使用して、shake アニメーションのキーフレームを定義します。
キーフレームでは、5 つの時点でスタイルの変化を設定します。 0% はアニメーションの開始状態を表し、100% はアニメーションの終了状態を表します。 25%、50%、および 75% はそれぞれ、さまざまな時点でのアニメーションの中間状態を表します。 transform 属性と translate 関数を使用すると、要素を水平および垂直に移動して、震える効果を実現できます。
最後に、上記のコードを style.css ファイルとして保存し、HTML ファイルに関連付ける必要があります。次に、ブラウザで揺れの効果を確認できます。
上記は、震える特殊効果を作成するための完全な手順です。ニーズに応じてアニメーションの長さ、変位、色などのパラメータを調整して、Web デザインにより適したものにすることができます。
要約すると、CSS アニメーション テクノロジは、Web デザイナーにアニメーション効果を実現するシンプルかつ強力な方法を提供します。関連するテクノロジーとツールを習得することで、Web ページにさまざまなアニメーション効果を簡単に追加して、ユーザー エクスペリエンスを向上させ、ユーザーの注目を集めることができます。この記事があなたのお役に立てば幸いです。そして、あなたが Web デザインの道をさらに前進できることを願っています。
以上がCSS アニメーション ガイド: 揺れるエフェクトを作成する方法をステップごとに説明しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
クリップパスでアニメーション化しますApr 19, 2025 am 09:52 AMClip-Pathは、私たちが一般的に知っているCSSプロパティの1つですが、何らかの理由で頻繁に手を伸ばすことはできません。その意味では少し怖いです
GatsbyでGraphQLプレイグラウンドを使用しますApr 19, 2025 am 09:51 AM私はあなたのほとんどがすでにギャツビーについて聞いていると仮定しており、少なくともそれが基本的に反応サイトの静的サイトジェネレーターであることを大まかに知っています。一般的に
タイプまたはテスト：両方ではないのはなぜですか？Apr 19, 2025 am 09:50 AM時々、議論は型付けされたJavaScriptの価値について燃え上がります。 「もっとテストを書くだけです！」対戦相手を叫ぶ。 「ユニットテストをタイプに置き換えてください！」
自分の怠zyなロードを転がすためのヒントApr 19, 2025 am 09:44 AM「怠zyな読み込みを使用できる」と聞いたことがあるかもしれません（または電話を発行しました！特に重いウェブページをスリムにする方法を探しているとき。
CSS 2019調査の3つの予測Apr 19, 2025 am 09:43 AMCSS状態のような開発者調査を実行することは、マルチステージプロセスです。まず、データを収集する必要があります。次に、使用可能な形状に処理します。
最後に...最終的に約束の投稿Apr 19, 2025 am 09:39 AM「JavaScriptの約束で最終的に発砲するのはいつですか？」これは私が最近のワークショップで尋ねられた質問であり、私は何かをクリアするために少し投稿を書くと思いました
マイクロフロントエンドApr 19, 2025 am 09:37 AMあるランダムな日は少し前に、「マイクロフロントエンド」についての冗談の後に冗談を聞き始めました。トーストについて最初に学んだ方法です。私は理解していませんでした
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SublimeText3 中国語版
中国語版、とても使いやすい
Dreamweaver Mac版
ビジュアル Web 開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
