ホバーすると要素が浮き上がるアニメーション

[ ID : 5713 ]
ブロンズ
ホバーすると要素が浮き上がるアニメーション
実装目安
1分

概要

対象の要素をホバーすると、斜め上にずれて浮き上がるCSSアニメーションを実装方法を紹介。

用途・要件

  • transitionを使用したCSSアニメーション。
  • ホバーした要素が斜め上にずれて影があるように見せる。
  • CSSのbox-shadowプロパティは使用していない。
  • ホバー時にガクガクしない。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録