ホバーで変化するテキストの作り方|CSS

ホバーで変化するテキストの作り方|CSS CSS
この記事は約2分で読めます。
スポンサーリンク

ユーザーアクションで表示を切り替えるのってよく見ますよね。
今回は、パソコンでマウスカーソルを持ってくと、文字を「ふわっ」と変化させるテクニックのご紹介です。

文字がふわっと変化する

CSSだけで要素を変化させる時は、「:hover」を使います。
元の要素にあらかじめCSSを設定しておきます。
大事なのは、元の要素に「transition」を入れることです。
この「transition」は変化に関わること全部の設定ができます。
まず、変化させる時間は、「s」や「ms」という単位を使います。

・1s = 1秒
・1ms = 0.001秒
・10ms = 0.01秒
・100ms = 0.1秒
・1000ms = 1秒

自分は、いつも「s」を使いますので今回も「s」を使って書きます。
「transition」には、変化時間の他にイイ感じの動きも設定できます。
その動きを「easing(イージング)」と言って、イイジングだけにイイ感じの動きになるんですよ。

……….

すみません。言いたいだけになってしまいました。
話を戻しますね。
「easing(イージング)」には、色々種類があって、「ブワッ」となる動きや「シュイーン」となる動きや….
全然伝わらないですよね。こちらのeasing見本サイトを見ると動きが分かりやすいです。

「transition」を使う時は、必ずベンダープレフィックスも忘れずについかしてくださいね。
(Android 4.2以下は、ベンダープレフィックスが無いと動かないです)

【HTML】

<div class="henka">
  ここは、カーソルを当てても変化しませんが、
  <span>
    1秒かけてここが変化します!
  </span>
</div>

【CSS】

.henka span {
  font-size: 20px;
  font-weight: 800;
  color:pink;
  transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.henka span:hover {
  color: white;
}

【実行結果】

ここは、カーソルを当てても変化しませんが、1秒かけてここが変化します!

今回は、文字を変化させるテクニックでした。

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました