CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 14, 2022 pm 04:32 PM

css

方法: 1. マウスが要素の上を通過するときにスタイルを設定するには、「:hover」セレクターを使用します。構文は「element:hover{スタイルコード}」です。 2. で「element {」を使用します。マウスがその上を通過するときのスタイルコード。アニメーションを要素にバインドするには、animation: name time}" ステートメント。3. 効果を設定するには、"@keyframes fadenum{100%{border-radius:0;}}" ステートメントを使用します。丸い角が消えるまで拡大します。

CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3で角丸を拡大した後にマウスが消えるように設定する方法

1. :hover疑似クラスセレクター設定スタイル

css内:hover は疑似クラスセレクターです。:hover 疑似クラスセレクターは、マウスを要素上に移動すると、この要素に特別なスタイルを追加します。 :hover セレクターはすべての要素に適用されます。

:ホバーは、マウスがリンク上に移動したときに追加される特別なスタイルです。

IE では、「:hover」セレクターを有効にするには、「」を宣言する必要があります

2. アニメーションを使用してアニメーションをバインドする

animation プロパティは、6 つのアニメーションプロパティを設定するための短縮プロパティです:

animation-name
animation-duration
アニメーションタイミング関数
アニメーション遅延
アニメーション反復数
animation-direction

3. @keyframes を使用してアニメーションを設定します

Through @キーフレームルールを使用してアニメーションを作成できます。

アニメーション作成の原則は、ある CSS スタイルセットを別のスタイルセットに徐々に変更することです。

この CSS スタイルのセットは、アニメーションプロセス中に複数回変更できます。

変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。

0% はアニメーションの開始時間、100% はアニメーションの終了時間です。

ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
div
{
width: 80px;
height: 50px;
background:pink;
border:1px solid #000;
border-radius:50%;
}
div:hover
{
animation:fadenum 5s;
}
@keyframes fadenum{
  100%{border-radius:0;}
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

出力結果:

CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法

(学習ビデオ共有: css ビデオチュートリアル ,htmlビデオチュートリアル)

以上がCSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Reactの限界は何ですか？May 02, 2025 am 12:26 AM

raceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution

Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください

反応の動的リストの安定したユニークなキーを生成するMay 02, 2025 am 12:22 AM

coreChallengeingEneratingは、duniqueys consinistinsidentifientiversre-renderseforeffiencedomupdates.1）aseenaturalKeysisisisisisisisedisederiableiableiaibuniqueandStable.2）denatekeysBaseTheBasedOnMultipreattributive.2）を無効にすることを非難することを解決します

JavaScriptの疲労：Reactとそのツールで最新の状態を維持しますMay 02, 2025 am 12:19 AM

javascriptfatigueinReactismainageable with rikeislikedivedingingindininginginformationscors.1）whatyouneedwhenyouneedit、focusingonprojectrelevance.2）

UseState（）フックを使用するコンポーネントをテストしますMay 02, 2025 am 12:13 AM

ESTESTROACTCOMPONENTSINGTHESESTATEHOOK、USEJESTANDREACTINTINGLIBRARYTOSIMULATE INTERACTIONSIONDANDVERIFYISTAMESISINTHEUI.1）RENDERTHECONCENTANDCHECKECHINITATA.2）SimulateUserIractionSionsionsionsionsionsionslikeClickSorformSubmissions.3）

Reactのキー：パフォーマンスの最適化技術への深い飛び込みMay 01, 2025 am 12:25 AM

keysinReactarecialforptimizingperformancebyididingineffictientListupdates.1）usekeystoidentifideidifyandtracklistelements.2）ArrayIndicesassyStopreventPerformanceSues.3）suoseStableidedifierslikeItem.idtomaincomentaindtateandiproveperift

Reactのキーとは何ですか？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiersiersiderSuredStrovereconconiniationEfficiency.1）theyctrackChangesinListitems、2）sultanduniqueidentifiersiirsiTeemidssisssississmendを使用して、3）ArrayIndicesAssayStopReventisSuseSUSEORINGを回避します

反応におけるユニークな鍵の重要性：一般的な落とし穴を避けるMay 01, 2025 am 12:19 AM

sinqueysarecrucialinReactforoptimizing andMaintainingcomponentStateIntegrity.1）useanaturaluniqueidentifierfromyourdataifaibable.2）ifnonaturalidentifierexists、発電済みのKeyusingingingingalibrarylikuuid.3）

See all articles