ホームページ > 記事 > ウェブフロントエンド > CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法
CSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法
- WBOYオリジナル
- 2022-06-14 16:32:131488ブラウズ
方法: 1. マウスが要素の上を通過するときにスタイルを設定するには、「:hover」セレクターを使用します。構文は「element:hover{スタイル コード}」です。 2. で「element {」を使用します。マウスがその上を通過するときのスタイル コード。アニメーションを要素にバインドするには、animation: name time}" ステートメント。3. 効果を設定するには、"@keyframes fadenum{100%{border-radius:0;}}" ステートメントを使用します。丸い角が消えるまで拡大します。
このチュートリアルの動作環境: 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>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル ,htmlビデオチュートリアル)
以上がCSS3でマウスをズームインし、丸い角を通過した後に消えるように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。