ホームページ >毎日のプログラミング >CSSの知識 >CSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ)
CSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ)
- 藏色散人オリジナル
- 2018-10-19 16:00:136574ブラウズ
この記事では、css3を使ってマウス移動時の可変長効果を実現する方法を中心に紹介します。
フロントエンド ページのデザインにおいて、CSS の機能は非常に強力であり、それをうまく使用すれば、多くの Web サイトでさまざまな素晴らしい動的効果を実現できます。前回の記事では、CSS を使用してアニメーション効果を実現するいくつかの方法についても説明しました。[Css3 アニメーションで回転と移動の効果を実現するにはどうすればよいですか?] ][css3 でマウスをホバーしたときに画像のゆっくりとした拡大効果を実現するにはどうすればよいですか?]知識ポイントの紹介を待って、必要な友人がそれを参照することを選択できます。
次に、簡単なコード例を組み合わせて、マウスが div 内に移動したときに div を長くする効果を実現する css3 メソッドを紹介します。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
<style>
.hover{
width: 200px;
height: 200px;
border-radius: 10px;
background: red;
margin-top: 100px;
margin-left: 100px;
transition: width 2s;
}
.hover:hover{
background: blue;
width: 500px;
}
</style>
</head>
<body>
<div class="hover">
hover
</div>
</body>
</html>実際、この効果は非常に基本的でシンプルです。主に :hover selector と transition の使い方をマスターします。
:ホバー セレクター は、マウス ポインターが浮いている要素を選択するために使用されます。
Transitiontransition は、transition-property、transition-duration、transition-timing-function、transition-delay の 4 つのサブプロパティを含む複合属性です。完全なトランジション効果は、これら 4 つのサブプロパティの連携によって完成します。
フォアグラウンドの上記のコードによって達成される効果は、以下に示すとおりです。 #この記事 この記事は、マウスが移動したときに可変長効果を実現する
css3 メソッドの紹介です。これも非常に簡単なので、困っている友人に役立つと幸いです。
フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイト
、CSS ビデオ チュートリアル 、
Bootstrap を参照してください。チュートリアルなど。関連するチュートリアルは、どなたでも参照して学習できます。 さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています: javascript 特殊効果コレクション
以上がCSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。