【CSS】ちょっとイケてるホバーエフェクト!#1 初心者でも大丈夫!

こんにちは!ラクです。

この記事では、ちょっとイケてるホバーエフェクトを紹介しようと思います!

ちょっとイケてるホバーエフェクト

では、早速今回紹介するホバーエフェクトのデモをみてもらいます!

See the Pen Hover Effect #1 by ラク (@raku_gurafiri) on CodePen.

どうですか?ちょっといけてるでしょ?w

初心者の方からするとどうやってこの動きを再現しているのか分からないと思います。

でも大丈夫!意外と簡単な物の組み合わせなので、解説を見てもらえるとすぐに使えるようになると思います!!

このエフェクトの正体は、、擬似要素

見出しで答えを言ってしまいましたが、実はbox(Twitterの丸)の「擬似要素」を動かして、このエフェクトを作っています。

分かりやすいように、「overflow: hidden;」を外してみると、、

See the Pen YzwMxrX by ラク (@raku_gurafiri) on CodePen.

こんな感じです。

「なんだぁ、これだけかw」って思ったでしょ?

でも、これだけです。

緩急はCSS-animationで

先ほど紹介した、擬似要素を行って戻ってくる感じの動きにしたい時は、「animation」の出番です!

See the Pen Hover Effect #1 by ラク (@raku_gurafiri) on CodePen.

.box:hover::before」でboxをホバーした時の擬似要素の動きを指定して、その下の「@keyframes position」で行って帰ってくる動きを作っています。

「animation」と「transform」の違いについては、以下の記事で解説しているので、分からない方は読んでみてください!

最後にz-indexで階層を設定!

このエフェクトの主な仕組みは紹介しましたが、最後に初心者がつまづきやすい「z-index」の設定をしていきます。

z-indexとは、階層、分かりやすくいうと「奥行き」を指定できます。

この奥行きがないと、、

See the Pen abdxyRg by ラク (@raku_gurafiri) on CodePen.

擬似要素が一番上にきて、Twitterの青い鳥もろとも隠してしまいます。

そこで、z-indexを使い「青い鳥」>「擬似要素」>「box」とすることによって、覆いかぶさって隠してしまう現象を防ぎます!!

まとめ

ラク
ラク

いかがだったでしょうか?

ちょっとイケてるホバーエフェクトも簡単なことの組み合わせで作れちゃいます!

これからも定期的にイケてるホバーエフェクトの記事を出したいと思うので、ぜひまた来てください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です