• css

cssでマウスをおいた時に動かそう

はじめに

リンクなどをマウスのポインターを乗せた時に文字が動いたり背景がゆっくり変わったりする物をよくみるのですが、どうやって作っているんですかね・・
それはマウスをおいた時の動作 hover を行った時に文字を動かしたり、背景を変えたりするクラスをjqueryで付与したり、cssで動きをつけたりしていますね。
cssでもマウスをhoverした時にアニメーションをつけることができるんですね。
cssでもアニメーションをつけることは可能ですね。今回は簡単なサンプルをふまえながらcssでアニメーションをつけていきましょう。

CSSでhoverした時に動かそう

今回は、cssでリンクをhover(マウスをリンクの上におく動作)した時に、アニメーションをつける方法について説明していきたいと思います。考え方としましては、hover前とhover後の動作にdelayをかけることで視覚的にアニメーションが発生しているように見えるように行います。

サンプルコード

HTML

<!DOCTYPE html>
<head>
  <title>cssでアニメーションをしよう</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a class="link_sample1" href="">リンクの背景がゆっくり変化します。</a>
	<a class="link_sample2" href="">リンクの文字が1文字分だけゆっくりずれます。</a>
	<a class="link_sample3" href="">リンクの文字が横回転します。</a>
</body>
</html>

CSS

.link_sample1{
 transition:1s all;
}
.link_sample1:hover{
 transition:1s all;
 background:#ccc;
}
.link_sample2{
 transition:1s all;
}
.link_sample2:hover{
 padding-left:1em;
 transition:1s all;
}
.link_sample3{
 transition:1s all;
 display:inline-block;
}
.link_sample3:hover{
 transform:rotateY(360deg);
 transition:1s all;
}

サンプルコードの実装例

マウスのカーソルを合わせるとリンクの背景がゆっくり変化します。
リンクの背景がゆっくり変化します。

マウスのカーソルを合わせるとリンクの文字が1文字ゆっくり移動します。
リンクの文字が1文字分だけゆっくりずれます。

マウスのカーソルを合わせるとリンクの文字が横回転します。。
リンクの文字が横回転します。

上記のように様々なアニメーションをcssで行うことができます。
ぜひ試して見てください。

関連記事

  1. CSS講座 – 文字の色を変えてみよう –

  2. 見出しの前に三角形をつけてみよう

  3. CSSで見出しを飾りつけよう

  4. CSSで文字の間隔を変更してみた

  5. borderが横幅からはみ出てしまう

  6. 特定の番号の要素のcssだけ変更してみよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930