「マウスオーバーした時、背景カラーをふわっと変える設定」をまとめておきます。
CSSで、元になる色と、マウスオーバーした時の色を設定するだけです。
以下で細かく見ていきます。
マウスオーバーした時、背景カラーをふわっと変える設定
1. もとの色を設定する
まずは色を変化させる前の、元となる背景色を設定する。
【CSS 】
1
#sample{background-color:#000000;
2
width:○○○px;
3
height:○○○px;
4
}
2. マウスオーバーした時の色とエフェクト効果の設定をする
次にマウスオーバーした時の色とエフェクト効果の設定をする。
「transition」につける値で、変化のスピードを調整可能。
【 CSS 】
1
#sample{
2
background-color:#ffffff;
3
}
4
5
#sample::before,
6
#sample::after{
7
position:absolute;
8
z-index:-1;
9
display:block;
10
content:”;
11
}
12
13
#sample,
14
#sample::before,
15
#sample::after{
16
-webkit-box-sizing:border-box;
17
-moz-box-sizing:border-box;
18
box-sizing:border-box;
19
-webkit-transition:all .3s;
20
transition:all .6s;
21
}
22
関連記事
マウスオーバー時に効果をつけるtips記事
PICK UP
TIPS記事セレクション
Great page, At last I will wantcomment your good article. You completed a number of fine points here.