6月16日 transition
昨日のツイートになんと、顧問から直々に引用リツイートが!!!
ボタンのcssに
— かずきち@ブロガーエンジニア (@kazukichi_it) 2022年6月16日
transition: all .5s
くらいをつけとくとふわっと滑らかなインタラクションになるよ https://t.co/t185Z38WfG
これを見て速攻transitionを調べましたよ。はい。
んで、速攻当てました!!!
。。。が。。。思ってたんと違う。。。
確かにふわってなるけど、なんかもう全部ふわってなるやん。。。
なんなら、widthとかpaddingとか、ボタンの形を決める前の要素からふわってボタンが成形されてくやん。。。で、その後はマウスカーソル合わせても変化なし。。。
んー。。。
ってことで散々実験した結果、:hoverにbox-shadowを当てて、その変化をtransitionでフワッとさせてみました。
widthとかは元と:hover両方に入ってても効くけど、backgroundは効かない。box-shadowも。なので、:hoverにだけbox-shadow入れるのに落ち着きました。
— たかのしゅー@ウェブカツやってます (@muzak_luv) 2022年6月16日
むずかったけど、クッソ楽しかった!!
かずきち顧問、ありがとうございました!!#ウェブカツ #プログラミング初心者 #プログラミング勉強中 https://t.co/0nqgkilH8X pic.twitter.com/WRiXW2zaVm
少しずつですが、、、
「やべー!難しい!!ちょー楽しいーーー!!」
って感じになってきました。
この思考になったら最強だと思って、これからも闘って生き(行き)ます!!!
あと、この場を借りてお礼を。
アドバイス下さったちゃーさん。お時間割いていただき、ありがとうございました!
ホバーの時のやつにもtransition書かないとスンてなりますよ💁♂️
— ちゃー (@chaki01288) 2022年6月16日
19時半から22時半