css3 マウスイン特殊効果: div カラーグラデーションとズームイン効果を実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3 マウスイン特殊効果: div カラーグラデーションとズームイン効果を実現する方法

坏嘻嘻

Sep 21, 2018 am 11:09 AM

css3

この記事の内容は、CSS3 でトランジションを使用して、マウスがホバーしているときに div の色、高さ、幅を変更する効果を実現する方法についてです。必要な友人はそれを参照できます。、お役に立てば幸いです。

Web ページを閲覧していると、マウスを特定の領域の上に置くと、指定した時間内 (一定時間内であっても) にその領域の形状が拡大または縮小するという状況がよく見られます。サイズが変わると色のグラデーションが発生します。この特殊効果はどのようにして実現されるのでしょうか? CSS3 で、transition 属性と hover 属性を使用して、div カラーグラデーションとズームイン/ズームアウトの効果を実現する方法を紹介します。

#css3 のtransition 属性

transition 属性は省略された属性であり、transition-property、transition という 4 つのトランジション属性に使用されます。 - 期間、遷移タイミング関数、および遷移遅延。

transition-property: 移動するスタイル (デフォルト値は all で、all、attr、none の 3 つの定義があります)
##transition-duration: 移動時間 (移動時間のみが必須の値であり、0 にすることはできません。それ以外の場合、遷移は何の効果もありません)
transition-timing-function: 動作形式 (使用方法は以下の 6 つ)
ease: (徐々に遅くなる)
Linear: (一定速度)
イーズイン (加速)
イーズアウト: (減速)
イーズインアウト: (最初に加速してから減速)
cubic-bezier ベジェ曲線: (x1, y1, x2, y2) )
注: 定義されていない場合、transition-timing-function のデフォルト値は easy です。
transition-delay: 遅延時間 (デフォルト値は 0)

transition 属性ブラウザとの互換性 (W3C 標準に準拠)

##Internet Explorer 10、Firefox、Opera、Chrome などのブラウザの上位バージョンでは、transition 属性の標準的な記述方法がサポートされています。 Safari は、代替の -webkit-transition 属性をサポートしています。ただし、Internet Explorer 9 以前のブラウザは、transition 属性をサポートしていません。

css3 マウスイン特殊効果の実装コード

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
      .box{
          width：100px；
          height：100px；
          background-color：blue；
          transition-duration：2s；
          transition-timing-function：ease；
          transition-delay：0s；
          transition-property：all；
          }
     .box:hover{
          width：200px；
          height：200px；
          background-color：red;
                }
    </style>
 </head>
  <body>
         <div class="box"></div>
   </body>
</html>

CSS3 マウスイン特殊効果の実装効果は次のとおりです。図に示す

さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています: css3 マウスイン特殊効果: div カラーグラデーションとズームイン効果を実現する方法 javascript 特殊効果コレクション