CSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ)-CSSの知識-php.cn

CSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ)

藏色散人

リリース： 2019-11-30 16:37:44

オリジナル

6589 人が閲覧しました

この記事では、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 メソッドの紹介です。これも非常に簡単なので、困っている友人に役立つと幸いです。

CSS3でマウスが上に移動したときに伸びる効果を実現するにはどうすればよいですか? (写真 + ビデオ) フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイト