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

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

WBOY

リリース： 2022-06-14 16:32:13

オリジナル

1606 人が閲覧しました

方法: 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でマウスをズームインし、丸い角を通過した後に消えるように設定する方法