ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 マウスイン特殊効果: div カラー グラデーションとズームイン効果を実現する方法
css3 マウスイン特殊効果: div カラー グラデーションとズームイン効果を実現する方法
- 坏嘻嘻オリジナル
- 2018-09-21 11:09:0011017ブラウズ
この記事の内容は、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: (一定速度)
注: 定義されていない場合、transition-timing-function のデフォルト値は easy です。
イーズイン (加速)
イーズアウト: (減速)
イーズインアウト: (最初に加速してから減速)
cubic-bezier ベジェ曲線: (x1, y1, x2, y2) ) 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、html5、JavaScript 特殊効果コードがすべて含まれています: 
javascript 特殊効果コレクション
以上がcss3 マウスイン特殊効果: div カラー グラデーションとズームイン効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。