はじめてのCodePenデビュー
今まで、使い回すコードやスニペットなどは、VSCodeやBoostnoteで管理していたのですが、以下の理由から、CodePenを使ってみようと決意しました。
- オンライン上でコードがすぐに反映され、すぐに保存もできる。
- ホームボタンを押せばすぐに世界中の人が書いたカッコいいコードがたくさん見られて刺激になる
- コードを公開してレビューをもらいたい
CodePenの他にも色々そういうサービスはたくさんあるみたいですが、個人的に馴染みがあって、よく色んな所で見かけていたので、CodePenをチョイスしました。
マウスホバーでアニメーションするボタン※スマホ対応
この度、仕事のコーディングでマウスホバーエフェクトのボタンを実装しました。
仕事で作ったものは単色でしたが、せっかくなのでアレンジしたいと思い、ハマっている日向坂46のイメージカラーを流行りのグラデーションにして作ってみました。
ただ当たり前のことですが、マウスホバーのエフェクトはパソコンでしか見られない仕様なので、少し工夫を加えてスマホなどのレスポンシブでもホバーエフェクトが見られるようにしました。
詳細は↓の解説でご紹介します。気になる方はそちらを要チェキです。
デモ
早速ご紹介します。（Resultでボタンが見られます）
See the Pen ボタンアニメーション-グラデーション by jookalubi (@jookalubi) on CodePen.
コード画面にも書きましたが、スマホの場合はまずボタンをタップしてもらって、そのあと別の所をタップするとエフェクトが見られます。
パソコンだとホバーしている間に色が変わって、ホバーを外すと色が戻る、という動きになります。
解説
エフェクトはCSSのみで実装されています。肝となる部分だけ軽く触れます。
ポイントとなるのは、beforeの疑似要素とtransformです。
skewというtransformは私も今回、初めて使いました。
skew Xで角度を指定すると、平行四辺形みたいな形になります。
それをbeforeで作って、親要素のdivで平行四辺形の余計な部分を切り取っているイメージです。
|
1 |
.btn:hover {<br />color: #fff;<br />}<br />.btn::before{<br />position: absolute;<br />top: 0;<br />left: -30%;<br />z-index: -1;<br />content: '';<br />width: 130%;<br />height: 100%;<br />background:linear-gradient(to right, #5bbee5 0%, #52ddae 100%);<br />transform-origin: right top;<br />transform: skewX(30deg) scale(0, 1);<br />transition: transform .3s ease-in;<br />}<br />.btn:hover::before {<br />transform-origin: left top;<br />transform: skewX(30deg) scale(1, 1)<br />} |
もし気に入った方はご自由にお使いくださいませ～
コメント