2017年7月26日水曜日

透明度のトランジションはボックスに直接

ホバー時に透明度を変更し、そのアクションをゆっくりとさせる、トランジションを加えるには
ボックスに戻るときの transition
ボックスのホバーに ホバー時の transition
を設定する。
要はアンカーとアンカーのホバーではなく、ボックスに直接設定する。

.box{

はば
width:300px;
高さ
height:56px;

角丸にする
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

背景色
background:#000;

今回トランジションする透明度プロパティ
opacity:0.7;

3秒かけて元の0.7に戻る
transition:3s;

}

.box a:link{
アンカーでは無効
}
.box a:hover{
アンカーのホバーも無効
}

.box:hover{

ホバー時の透明度
opacity:0.9;

1秒かけて0.9になる
transition:1s;
}

以下、ボタン反応部分の設定(ボックスと同じにする)

.back-to-news a{

display:block;

width:300px;
height:56px;

border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;

}


0 件のコメント:

コメントを投稿