デイトラweb制作中級編 DAY20

マウスホバー時の動きを付ける

アクション要素ホバーアニメーションを付与する

基本的にはデザイナーが指定するが、

指示がない場合はとりあえずで透過処理を加えておく

a {
   
transition: all 0.3s ease 0s;

   
&:hover {
        opacity: 0.7;
    }

}

transitionのそれぞれの意味

all ・・・ アニメーションさせるプロパティを指定

②0.3s
・・・ アニメーションが動いている時間

③ease
・・・ タイミング

④0s
・・・ アニメーションが開始するまでの間

そのほかの種類については ↓

まとめ

今回はアクション要素にマウスホバー時の動きを付けていきました。

DAY20はさくっと終わってしまったので、紹介されたサンプル15個 を自分も作って遊んでみようと思います!

コメントを残す

メールアドレスが公開されることはありません。