最終更新日：2024.09.30
公開日：2022.07.03

レシピ

CSSレシピ

テキストリンクのCSSレシピ

CSSを使ってテキストリンクの色やボーダー、背景色に動きをつけるアニメーションのレシピを紹介します。

この記事のポイント

CSSのアニメーションでテキストリンクに動きをつける

テキストリンクのCSSレシピ

CSSを使ったテキストリンクの色やボーダー、背景色、アイコン画像にアニメーションで動きを付けるレシピ集です。

以下のコード例ではindex.htmlがstyle.cssを読み込むことを想定します。
また、全てのテキストリンクはclass属性でtextlinkを設定し、以下のCSSを共通で適用します。

style.css

// テキストリンクの共通スタイル
.textlink {
	display: inline-block;
	color: #222;
	text-decoration: none;

	&:hover {
		text-decoration: none;
	}
}

テキストの色を変化させる

テキストリンクにマウスカーソルが乗ったときにテキストの色を変化させます。

テキストリンク1：テキストの色が変化

テキストリンク1

テキストリンク2：テキストの色がグラデーションで変化

テキストリンク2テキストリンク2

index.html

// テキストリンク1
<p><a class="textlink textlink_type1" href="#">テキストリンク1</a></p>

// テキストリンク2
<p><a class="textlink textlink_type2" href="#"><span>テキストリンク2</span><span>テキストリンク2</span></a></p>

style.css

// テキストリンク1
.textlink_type1 {
	transition: color .3s ease;

	&:hover {
		color: #999;
	}
}


// テキストリンク2
.textlink_type2 {
	position: relative;

	span:nth-child(1) {
		display: inline-block;
		z-index: 2;
		background: linear-gradient(to bottom right, rgba( 34,34,34,1.0) 0%, rgba(153,153,153,1.0) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 1.0;
		transition: opacity .5s ease;
	}

	span:nth-child(2) {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-image: linear-gradient(to bottom right, rgba( 0, 33, 155, 1.0) 0%, rgba( 145, 163, 226, 1.0) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.0;
		transition: opacity .5s ease;
	}

	&:hover {
	
		span:nth-child(1) {
			z-index: 1;
			opacity: 0.0;
		}

		span:nth-child(2) {
			z-index: 2;
			opacity: 1.0;
		}
	}
}

テキストの背景色を変化させる

テキストリンクにマウスカーソルが乗ったときにテキストの背景色を変化させます。

index.html

// テキストリンク1
<p><a class="textlink textlink_bg_type1" href="#">テキストリンク1</a></p>

// テキストリンク2
<p><a class="textlink textlink_bg_type2" href="#"><span>テキストリンク2</span><span>テキストリンク2</span></a></p>

// テキストリンク3
<p><a class="textlink textlink_bg_type3" href="#"><span>テキストリンク3</span><span>テキストリンク3</span></a></p>

// テキストリンク4
<p><a class="textlink textlink_bg_type4" href="#"><span>テキストリンク4</span><span>テキストリンク4</span></a></p>

// テキストリンク5
<p><a class="textlink textlink_bg_type5" href="#"><span>テキストリンク5</span><span>テキストリンク5</span></a></p>

// テキストリンク6
<p><a class="textlink textlink_bg_type6" href="#">テキストリンク6</a></p>

style.css

// テキストリンク1
.textlink_bg_type1 {
	background-color: transparent;
	transition: color .3s ease, background-color .3s ease;

	&:hover {
		color: #f7f7f7;
		background-color: #222;
	}
}


// テキストリンク2
.textlink_bg_type2 {
	position: relative;

	span:nth-child(2) {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 0%;
		height: 100%;
		color: #f7f7f7;
		background: #222;
		transition: width .3s ease;
	}

	&:hover {

		span:nth-child(2) {
			width: 100%;
		}
	}
}


// テキストリンク3
.textlink_bg_type3 {
	position: relative;

	span:nth-child(2) {
		overflow: hidden;
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 0%;
		height: 100%;
		color: #f7f7f7;
		background: #222;
		transition: width .3s ease;
	}

	&:hover {

		span:nth-child(2) {
			width: 100%;
		}
	}
}


// テキストリンク4
.textlink_bg_type4 {
	position: relative;

	span:nth-child(2) {
		overflow: hidden;
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 0%;
		color: #f7f7f7;
		background: #222;
		transition: height .3s ease;
	}

	&:hover {

		span:nth-child(2) {
			height: 100%;
		}
	}
}


// テキストリンク5
.textlink_bg_type5 {
	position: relative;

	span:nth-child(2) {
		overflow: hidden;
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 0%;
		color: #f7f7f7;
		background: #222;
		transition: height .3s ease;
	}

	&:hover {

		span:nth-child(2) {
			height: 100%;
		}
	}
}


// テキストリンク6
.textlink_bg_type6 {

	&:hover {
		color: #f7f7f7;
		animation: bgFlash 1.0s steps(1, end) 1 both;
	}
}

@keyframes bgFlash {
	0%,
	20% {
		background-color: transparent;
	}

	10%,
	30%,
	100% {
		background-color: #222;
	}
}

テキストの下線を変化させる

テキストリンクにマウスカーソルが乗ったときに下線の色や長さをアニメーションで変化させます。

テキストリンクの下線1：下線の色が変わる

テキストリンクの下線1

テキストリンクの下線2：下線が中央から左右に広がる

テキストリンクの下線2

テキストリンクの下線3：下線が左から右に向かって伸びる

テキストリンクの下線3

テキストリンクの下線4：下線が右から左に向かって伸びる

テキストリンクの下線4

テキストリンクの下線5：下線が下から上に向かって現れる

テキストリンクの下線5

テキストリンクの下線6：下線が左から右に向かって伸び、右側に流れる

テキストリンクの下線6

テキストリンクの下線7：下線が右から左に向かって伸び、左に流れる

テキストリンクの下線7

index.html

// テキストリンクの下線1
<p><a class="textlink textlink_border_type1" href="#">テキストリンクの下線1</a></p>

// テキストリンクの下線2
<p><a class="textlink textlink_border_type2" href="#">テキストリンクの下線2</a></p>

// テキストリンクの下線3
<p><a class="textlink textlink_border_type3" href="#">テキストリンクの下線3</a></p>

// テキストリンクの下線4
<p><a class="textlink textlink_border_type4" href="#">テキストリンクの下線4</a></p>

// テキストリンクの下線5
<p><a class="textlink textlink_border_type5" href="#">テキストリンクの下線5</a></p>

// テキストリンクの下線6
<p><a class="textlink textlink_border_type6" href="#">テキストリンクの下線6</a></p>

// テキストリンクの下線7
<p><a class="textlink textlink_border_type7" href="#">テキストリンクの下線7</a></p>

style.css

// テキストリンクの下線1
.textlink_border_type1 {
	border-bottom: 2px solid #222;
	transition: border-bottom .3s ease;

	&:hover {
		border-bottom: 2px solid #999;
	}
}


// テキストリンクの下線2
.textlink_border_type2 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(0,1);
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform: scale(1,1);
		}
	}
}


// テキストリンクの下線3
.textlink_border_type3 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(0,1);
		transform-origin: left top;
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform: scale(1,1);
		}
	}
}


// テキストリンクの下線4
.textlink_border_type4 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(0,1);
		transform-origin: right top;
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform: scale(1,1);
		}
	}
}


// テキストリンクの下線5
.textlink_border_type5 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(1,0);
		transform-origin: center bottom;
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform: scale(1,1);
		}
	}
}


// テキストリンクの下線6
.textlink_border_type6 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(0,1);
		transform-origin: right top;
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform-origin: left top;
			transform: scale(1,1);
		}
	}
}


// テキストリンクの下線7
.textlink_border_type7 {
	position: relative;

	&::after {
		position: absolute;
		bottom: -3px;
		left: 0;
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: #222;
		transform: scale(0,1);
		transform-origin: left top;
		transition: transform .3s ease;
	}

	&:hover {
		&::after {
			transform-origin: right top;
			transform: scale(1,1);
		}
	}
}

テキストの二重下線を変化させる

テキストリンクにマウスカーソルが乗ったときに下線の色や長さをアニメーションで変化させます。

テキストリンクの二重下線1：二重下線の色が変わる

テキストリンクの二重下線1

テキストリンクの二重下線2：二重下線が中央から左右に広がる

テキストリンクの二重下線2

テキストリンクの二重下線3：二重下線が左から右に向かって伸びる

テキストリンクの二重下線3

テキストリンクの二重下線4：二重下線が右から左に向かって伸びる

テキストリンクの二重下線4

テキストリンクの二重下線5：二重下線が左から右に向かって伸びて、右側に流れる

テキストリンクの二重下線5

テキストリンクの二重下線6：二重下線が右から左に向かって伸びて、左側に流れる

テキストリンクの二重下線6

index.html

// テキストリンクの二重下線1
<p><a class="textlink textlink_border_type8" href="#">テキストリンクの二重下線1</a></p>

// テキストリンクの二重下線2
<p><a class="textlink textlink_border_type9" href="#">テキストリンクの二重下線2</a></p>

// テキストリンクの二重下線3
<p><a class="textlink textlink_border_type10" href="#">テキストリンクの二重下線3</a></p>

// テキストリンクの二重下線4
<p><a class="textlink textlink_border_type11" href="#">テキストリンクの二重下線4</a></p>

// テキストリンクの二重下線5
<p><a class="textlink textlink_border_type12" href="#">テキストリンクの二重下線5</a></p>

// テキストリンクの二重下線6
<p><a class="textlink textlink_border_type13" href="#">テキストリンクの二重下線6</a></p>

style.css

// テキストリンクの二重下線1
.textlink_border_type8 {
  position: relative;
}
.textlink_border_type8::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transition: background-color 0.3s ease;
}
.textlink_border_type8::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transition: background-color 0.3s ease;
}
.textlink_border_type8:hover::before {
  background-color: #999;
}
.textlink_border_type8:hover::after {
  background-color: #999;
}


// テキストリンクの二重下線2
.textlink_border_type9 {
  position: relative;
}
.textlink_border_type9::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
}
.textlink_border_type9::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
}
.textlink_border_type9:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type9:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの二重下線3
.textlink_border_type10 {
  position: relative;
}
.textlink_border_type10::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type10::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type10:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type10:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの二重下線4
.textlink_border_type11 {
  position: relative;
}
.textlink_border_type11::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type11::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type11:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type11:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの二重下線5
.textlink_border_type12 {
  position: relative;
}
.textlink_border_type12::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type12::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type12:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.textlink_border_type12:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


// テキストリンクの二重下線6
.textlink_border_type13 {
  position: relative;
}
.textlink_border_type13::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type13::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type13:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}
.textlink_border_type13:hover::after {
  transform-origin: right top;
  transform: scale(1, 1);
}

テキストの上下の線を変化させる

テキストリンクにマウスカーソルが乗ったときに上下線の色や長さをアニメーションで変化させます。

テキストリンクの上下線1：上下の線の色が変わる

テキストリンクの上下線1

テキストリンクの上下線2：上下の線が中央から左右に広がる

テキストリンクの上下線2

テキストリンクの上下線3：上下の線が左から右に向かって伸びる

テキストリンクの上下線3

テキストリンクの上下線4：上下の線が右から左に向かって伸びる

テキストリンクの上下線4

テキストリンクの上下線5：上下の線が左から右に向かって伸びて、右側に流れる

テキストリンクの上下線5

テキストリンクの上下線6：上下の線が右から左に向かって伸びて、左側に流れる

テキストリンクの上下線6

index.html

// テキストリンクの上下線1
<p><a class="textlink textlink_border_type14" href="#">テキストリンク14</a></p>

// テキストリンクの上下線2
<p><a class="textlink textlink_border_type15" href="#">テキストリンク15</a></p>

// テキストリンクの上下線3
<p><a class="textlink textlink_border_type16" href="#">テキストリンク16</a></p>

// テキストリンクの上下線4
<p><a class="textlink textlink_border_type17" href="#">テキストリンク17</a></p>

// テキストリンクの上下線5
<p><a class="textlink textlink_border_type18" href="#">テキストリンク18</a></p>

// テキストリンクの上下線6
<p><a class="textlink textlink_border_type19" href="#">テキストリンク19</a></p>

style.css

// テキストリンクの上下線1
.textlink_border_type8 {
  position: relative;
}
.textlink_border_type8::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transition: background-color 0.3s ease;
}
.textlink_border_type8::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transition: background-color 0.3s ease;
}
.textlink_border_type8:hover::before {
  background-color: #999;
}
.textlink_border_type8:hover::after {
  background-color: #999;
}


// テキストリンクの上下線2
.textlink_border_type9 {
  position: relative;
}
.textlink_border_type9::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
}
.textlink_border_type9::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transition: transform 0.3s ease;
}
.textlink_border_type9:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type9:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの上下線3
.textlink_border_type10 {
  position: relative;
}
.textlink_border_type10::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type10::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type10:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type10:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの上下線4
.textlink_border_type11 {
  position: relative;
}
.textlink_border_type11::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type11::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type11:hover::before {
  transform: scale(1, 1);
}
.textlink_border_type11:hover::after {
  transform: scale(1, 1);
}


// テキストリンクの上下線5
.textlink_border_type12 {
  position: relative;
}
.textlink_border_type12::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type12::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.3s ease;
}
.textlink_border_type12:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.textlink_border_type12:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


// テキストリンクの上下線6
.textlink_border_type13 {
  position: relative;
}
.textlink_border_type13::before {
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type13::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
.textlink_border_type13:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}
.textlink_border_type13:hover::after {
  transform-origin: right top;
  transform: scale(1, 1);
}

点が伸びて線になる

テキストリンクにマウスカーソルが乗ったときに上下左右の点が横に伸びて線になるアニメーションです。

点が伸びて線になる1

点が伸びて線になる2

点が伸びて線になる3

点が伸びて線になる4

index.html

// 点が伸びて線になる1
<p><a class="textlink textlink_border_type20" href="#"><span>点が伸びて線になる1</span></a></p>

// 点が伸びて線になる2
<p><a class="textlink textlink_border_type21" href="#"><span>点が伸びて線になる2</span></a></p>

// 点が伸びて線になる3
<p><a class="textlink textlink_border_type22" href="#"><span>点が伸びて線になる3</span></a></p>

// 点が伸びて線になる4
<p><a class="textlink textlink_border_type23" href="#"><span>点が伸びて線になる4</span></a></p>

style.css

// 点が伸びて線になる1
.textlink_border_type20 {
  position: relative;
}
.textlink_border_type20 span {
  display: block;
  padding: 10px;
}
.textlink_border_type20 span::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type20 span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type20::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type20::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type20:hover::before {
  width: 100%;
}
.textlink_border_type20:hover::after {
  width: 100%;
}


// 点が伸びて線になる2
.textlink_border_type21 {
  position: relative;
}
.textlink_border_type21::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type21::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type21 span {
  display: block;
  padding: 10px;
}
.textlink_border_type21 span::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type21 span::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type21:hover::before {
  width: 100%;
}
.textlink_border_type21:hover::after {
  width: 100%;
}


// 点が伸びて線になる3
.textlink_border_type22 {
  position: relative;
}
.textlink_border_type22::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type22::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type22 span {
  display: block;
  padding: 10px;
}
.textlink_border_type22 span::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.textlink_border_type22 span::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.textlink_border_type22:hover::before {
  width: 100%;
}
.textlink_border_type22:hover::after {
  width: 100%;
}
.textlink_border_type22:hover span::before {
  height: 100%;
}
.textlink_border_type22:hover span::after {
  height: 100%;
}


// 点が伸びて線になる4
.textlink_border_type23 {
  position: relative;
}
.textlink_border_type23::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type23::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: width 0.3s ease;
}
.textlink_border_type23 span {
  display: block;
  padding: 10px;
}
.textlink_border_type23 span::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.textlink_border_type23 span::after {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #222;
  transition: height 0.3s ease;
}
.textlink_border_type23:hover::before {
  width: 100%;
}
.textlink_border_type23:hover::after {
  width: 100%;
}
.textlink_border_type23:hover span::before {
  height: 100%;
}
.textlink_border_type23:hover span::after {
  height: 100%;
}

アイコン画像を動かす

テキストリンクにマウスカーソルが乗ったときに、アイコン画像をアニメーションで動きをつけます。

アイコン画像を動かす1：アイコン画像が右に動く

テキストリンク1

アイコン画像を動かす2：アイコン画像が左に動く

テキストリンク2

アイコン画像を動かす3：アイコン画像が奥に回転する

テキストリンク3

アイコン画像を動かす4：アイコン画像が縦軸で回転する

テキストリンク4

アイコン画像を動かす5：アイコン画像が時計回りに半回転する

テキストリンク5

index.html

// アイコン画像を動かす1
<p><a class="textlink textlink_icon_type1" href="#">テキストリンク1</a></p>

// アイコン画像を動かす2
<p><a class="textlink textlink_icon_type2" href="#">テキストリンク2</a></p>

// アイコン画像を動かす3
<p><a class="textlink textlink_icon_type3" href="#">テキストリンク3</a></p>

// アイコン画像を動かす4
<p><a class="textlink textlink_icon_type4" href="#">テキストリンク4</a></p>

// アイコン画像を動かす5
<p><a class="textlink textlink_icon_type5" href="#">テキストリンク5</a></p>

style.css

// アイコン画像を動かす1
.textlink_icon_type1 {
  padding-right: 20px;
}
.textlink_icon_type1::after {
  display: inline-block;
  content: "";
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 18px;
  vertical-align: top;
  transform: translate(0, 0);
  background: url(../images/icon_arrow_right2.svg) right center/10px auto no-repeat;
  transition: transform 0.3s ease;
}
.textlink_icon_type1:hover::after {
  transform: translate(5px, 0);
}


// アイコン画像を動かす2
.textlink_icon_type2 {
  padding-right: 20px;
}
.textlink_icon_type2::after {
  display: inline-block;
  content: "";
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 18px;
  vertical-align: top;
  transform: translate(0, 0);
  background: url(../images/icon_arrow_right2.svg) right center/10px auto no-repeat;
  transition: transform 0.3s ease;
}
.textlink_icon_type2:hover::after {
  transform: translate(-5px, 0);
}


// アイコン画像を動かす3
.textlink_icon_type3 {
  padding-right: 20px;
}
.textlink_icon_type3::after {
  display: inline-block;
  content: "";
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 18px;
  vertical-align: top;
  transform: rotate3d(0, 1, 0, 0deg);
  background: url(../images/icon_arrow_right2.svg) right center/10px auto no-repeat;
}
.textlink_icon_type3:hover::after {
  animation: rotateIcon 0.5s ease 1;
}

@keyframes rotateIcon {
  0% {
    transform: rotate3d(1, 0, 0, 0deg);
  }
  50% {
    transform: rotate3d(1, 0, 0, 180deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 360deg);
  }
}


// アイコン画像を動かす4
.textlink_icon_type4 {
  padding-right: 20px;
}
.textlink_icon_type4::after {
  display: inline-block;
  content: "";
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 18px;
  vertical-align: top;
  transform: rotate3d(0, 1, 0, 0deg);
  background: url(../images/icon_arrow_right2.svg) right center/10px auto no-repeat;
  transition: transform 0.3s ease;
}
.textlink_icon_type4:hover::after {
  transform: rotate3d(0, 1, 0, 180deg);
}


// アイコン画像を動かす5
.textlink_icon_type5 {
  padding-right: 20px;
}
.textlink_icon_type5::after {
  display: inline-block;
  content: "";
  margin-top: 3px;
  margin-left: 10px;
  width: 10px;
  height: 18px;
  vertical-align: top;
  transform: rotate3d(0, 0, 1, 0deg);
  background: url(../images/icon_arrow_right2.svg) right center/10px auto no-repeat;
  transition: transform 0.3s ease;
}
.textlink_icon_type5:hover::after {
  transform: rotate3d(0, 0, 1, 180deg);
}

テキストの影を変化させる

テキストリンクにマウスカーソルが乗ったときに、テキストの下に影が現れたり、影が動くことで押してる演出をするアニメーションです。

影を変化させる1：ぼんやりとした影が現れて浮き上がる演出

テキストリンク1

影を変化させる2：くっきりとした影が現れて浮き上がる演出

テキストリンク2

影を変化させる3：影が消えて押しているような演出

テキストリンク3

影を変化させる4：影が消えて押しているような演出

テキストリンク4

index.html

// 影を変化させる1
<p><a class="textlink textlink_shadow_type1" href="#">テキストリンク1</a></p>

// 影を変化させる2
<p><a class="textlink textlink_shadow_type2" href="#">テキストリンク2</a></p>

// 影を変化させる3
<p><a class="textlink textlink_shadow_type3" href="#">テキストリンク3</a></p>

// 影を変化させる4
<p><a class="textlink textlink_shadow_type4" href="#">テキストリンク4</a></p>

style.css

// 影を変化させる1
.textlink_shadow_type1 {
	transform: translateY(2px);
	transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.textlink_shadow_type1:hover {
	transform: translateY(0);
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}


// 影を変化させる2
.textlink_shadow_type2 {
	transform: translateY(2px);
	transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.textlink_shadow_type2:hover {
	transform: translateY(0);
	text-shadow: 0 3px 1px rgba(0, 0, 0, 0.2);
}


// 影を変化させる3
.textlink_shadow_type3 {
	transform: translateY(0);
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.textlink_shadow_type3:hover {
	transform: translateY(2px);
	text-shadow: none;
}


// 影を変化させる4
.textlink_shadow_type4 {
	transform: translateY(0);
	text-shadow: 0 3px 1px rgba(0, 0, 0, 0.2);
	transition: text-shadow 0.3s ease, transform 0.3s ease;
}
.textlink_shadow_type4:hover {
	transform: translateY(2px);
	text-shadow: none;
}

テキストを回転させる

テキストリンクにマウスカーソルが乗ったときに、テキストを回転させるアニメーションです。

テキストを回転させる1：テキスト全体が横を軸に回転

テキストリンク1

テキストを回転させる2：テキスト全体が縦を軸に回転

テキストリンク2

テキストを回転させる3：テキスト全体が時計回りに回転

テキストリンク3

テキストを回転させる4：1文字ずつ横を軸に回転

テキストリンク4

テキストを回転させる5：1文字ずつ縦を軸に回転

テキストリンク5

テキストを回転させる6：1文字ずつ時計回りに回転

テキストリンク6

index.html

// テキストを回転させる1
<p><a class="textlink textlink_rotate_type1" href="#">テキストリンク1</a></p>

// テキストを回転させる2
<p><a class="textlink textlink_rotate_type2" href="#">テキストリンク2</a></p>

// テキストを回転させる3
<p><a class="textlink textlink_rotate_type3" href="#">テキストリンク3</a></p>

// テキストを回転させる4
<p><a class="textlink textlink_rotate_type4" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>4</span></a></p>

// テキストを回転させる5
<p><a class="textlink textlink_rotate_type5" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>5</span></a></p>

// テキストを回転させる6
<p><a class="textlink textlink_rotate_type6" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>6</span></a></p>

style.css

// テキストを回転させる1
.textlink_rotate_type1 {
	&:hover {
		animation: rotateTextlink1 .5s linear 1;
	}
}

@keyframes rotateTextlink1 {

	0% {
		transform: rotate3d( 1, 0, 0, 0deg);
	}

	50% {
		transform: rotate3d( 1, 0, 0, 180deg);
	}

	100% {
		transform: rotate3d( 1, 0, 0, 360deg);
	}
}


// テキストを回転させる2
.textlink_rotate_type2 {
	&:hover {
		animation: rotateTextlink2 .5s linear 1;
	}
}

@keyframes rotateTextlink2 {

	0% {
		transform: rotate3d( 0, 1, 0, 0deg);
	}

	50% {
		transform: rotate3d( 0, 1, 0, 180deg);
	}

	100% {
		transform: rotate3d( 0, 1, 0, 360deg);
	}
}


// テキストを回転させる3
.textlink_rotate_type3 {
	&:hover {
		animation: rotateTextlink3 .3s linear 1;
	}
}

@keyframes rotateTextlink3 {

	0% {
		transform: rotate3d( 0, 0, 1, 0deg);
	}

	50% {
		transform: rotate3d( 0, 0, 1, 180deg);
	}

	100% {
		transform: rotate3d( 0, 0, 1, 360deg);
	}
}


// テキストを回転させる4
.textlink_rotate_type4 {

	span {
		display: inline-block;
	}

	&:hover {
		span:nth-child(1) {
			animation: rotateTextlink4 .3s linear .0s;
		}
		span:nth-child(2) {
			animation: rotateTextlink4 .3s linear .1s;
		}
		span:nth-child(3) {
			animation: rotateTextlink4 .3s linear .2s;
		}
		span:nth-child(4) {
			animation: rotateTextlink4 .3s linear .3s;
		}
		span:nth-child(5) {
			animation: rotateTextlink4 .3s linear .4s;
		}
		span:nth-child(6) {
			animation: rotateTextlink4 .3s linear .5s;
		}
		span:nth-child(7) {
			animation: rotateTextlink4 .3s linear .6s;
		}
		span:nth-child(8) {
			animation: rotateTextlink4 .3s linear .7s;
		}
	}
}

@keyframes rotateTextlink4 {

	0% {
		transform: rotate3d( 1, 0, 0, 0deg);
	}

	50% {
		transform: rotate3d( 1, 0, 0, 180deg);
	}

	100% {
		transform: rotate3d( 1, 0, 0, 360deg);
	}
}


// テキストを回転させる5
.textlink_rotate_type5 {
	span {
		display: inline-block;
	}

	&:hover {
		span:nth-child(1) {
			animation: rotateTextlink5 .3s ease;
		}
		span:nth-child(2) {
			animation: rotateTextlink5 .3s ease .1s;
		}
		span:nth-child(3) {
			animation: rotateTextlink5 .3s ease .2s;
		}
		span:nth-child(4) {
			animation: rotateTextlink5 .3s ease .3s;
		}
		span:nth-child(5) {
			animation: rotateTextlink5 .3s ease .4s;
		}
		span:nth-child(6) {
			animation: rotateTextlink5 .3s ease .5s;
		}
		span:nth-child(7) {
			animation: rotateTextlink5 .3s ease .6s;
		}
		span:nth-child(8) {
			animation: rotateTextlink5 .3s ease .7s;
		}
	}
}

@keyframes rotateTextlink5 {

	0% {
		transform: rotate3d( 0, 1, 0, 0deg);
	}

	50% {
		transform: rotate3d( 0, 1, 0, 180deg);
	}

	100% {
		transform: rotate3d( 0, 1, 0, 360deg);
	}
}


// テキストを回転させる6
.textlink_rotate_type6 {
	span {
		display: inline-block;
	}

	&:hover {
		span:nth-child(1) {
			animation: rotateTextlink6 .3s ease;
		}
		span:nth-child(2) {
			animation: rotateTextlink6 .3s ease .1s;
		}
		span:nth-child(3) {
			animation: rotateTextlink6 .3s ease .2s;
		}
		span:nth-child(4) {
			animation: rotateTextlink6 .3s ease .3s;
		}
		span:nth-child(5) {
			animation: rotateTextlink6 .3s ease .4s;
		}
		span:nth-child(6) {
			animation: rotateTextlink6 .3s ease .5s;
		}
		span:nth-child(7) {
			animation: rotateTextlink6 .3s ease .6s;
		}
		span:nth-child(8) {
			animation: rotateTextlink6 .3s ease .7s;
		}
	}
}

@keyframes rotateTextlink6 {

	0% {
		transform: rotate3d( 0, 0, 1, 0deg);
	}

	50% {
		transform: rotate3d( 0, 0, 1, 180deg);
	}

	100% {
		transform: rotate3d( 0, 0, 1, 360deg);
	}
}

テキストに動きをつける

テキストリンクにマウスカーソルが乗ったときに、テキストが動くアニメーションです。

テキストに動きをつける1：テキスト全体が横を軸に回転

テキストリンク1

テキストに動きをつける2：テキスト全体が縦を軸に回転

テキストリンク2

テキストに動きをつける3：テキスト全体が時計回りに回転

テキストリンク3

テキストに動きをつける4：1文字ずつ横を軸に回転

テキストリンク4

index.html

// テキストに動きをつける1
<p><a class="textlink textlink_move_type1" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>1</span></a></p>

// テキストに動きをつける2
<p><a class="textlink textlink_move_type2" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>2</span></a></p>

// テキストに動きをつける3
<p><a class="textlink textlink_move_type3" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>3</span></a></p>

// テキストに動きをつける4
<p><a class="textlink textlink_move_type4" href="#"><span>テ</span><span>キ</span><span>ス</span><span>ト</span><span>リ</span><span>ン</span><span>ク</span><span>4</span></a></p>

style.css

// テキストに動きをつける1
.textlink_move_type1 {
	span {
		display: inline-block;
		transform: translateY(0);
	}

	span:nth-child(1) {
		transition: transform .3s ease;
	}
	span:nth-child(2) {
		transition: transform .3s ease 0.1s;
	}
	span:nth-child(3) {
		transition: transform .3s ease 0.2s;
	}
	span:nth-child(4) {
		transition: transform .3s ease 0.3s;
	}
	span:nth-child(5) {
		transition: transform .3s ease 0.4s;
	}
	span:nth-child(6) {
		transition: transform .3s ease 0.5s;
	}
	span:nth-child(7) {
		transition: transform .3s ease 0.6s;
	}
	span:nth-child(8) {
		transition: transform .3s ease 0.7s;
	}

	&:hover {
		span {
			transform: translateY(-5px);
		}
	}
}


// テキストに動きをつける2
.textlink_move_type2 {
	span {
		display: inline-block;
	}

	&:hover {
		span:nth-child(1) {
			animation: moveTextlink1 .3s ease;
		}
		span:nth-child(2) {
			animation: moveTextlink1 .3s ease .1s;
		}
		span:nth-child(3) {
			animation: moveTextlink1 .3s ease .2s;
		}
		span:nth-child(4) {
			animation: moveTextlink1 .3s ease .3s;
		}
		span:nth-child(5) {
			animation: moveTextlink1 .3s ease .4s;
		}
		span:nth-child(6) {
			animation: moveTextlink1 .3s ease .5s;
		}
		span:nth-child(7) {
			animation: moveTextlink1 .3s ease .6s;
		}
		span:nth-child(8) {
			animation: moveTextlink1 .3s ease .7s;
		}
	}
}

@keyframes moveTextlink1 {

	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}

	100% {
		transform: translateY(0);
	}
}


// テキストに動きをつける3
.textlink_move_type3 {
	span {
		display: inline-block;
		transform: translateY(0);
	}

	span:nth-child(1) {
		transition: transform .3s ease;
	}
	span:nth-child(2) {
		transition: transform .3s ease 0.1s;
	}
	span:nth-child(3) {
		transition: transform .3s ease 0.2s;
	}
	span:nth-child(4) {
		transition: transform .3s ease 0.3s;
	}
	span:nth-child(5) {
		transition: transform .3s ease 0.3s;
	}
	span:nth-child(6) {
		transition: transform .3s ease 0.2s;
	}
	span:nth-child(7) {
		transition: transform .3s ease 0.1s;
	}
	span:nth-child(8) {
		transition: transform .3s ease;
	}

	&:hover {
		span {
			transform: translateY(-5px);
		}
	}
}


// テキストに動きをつける4
.textlink_move_type4 {
	span {
		display: inline-block;
	}

	&:hover {
		span:nth-child(1) {
			animation: moveTextlink1 .3s ease;
		}
		span:nth-child(2) {
			animation: moveTextlink1 .3s ease .1s;
		}
		span:nth-child(3) {
			animation: moveTextlink1 .3s ease .2s;
		}
		span:nth-child(4) {
			animation: moveTextlink1 .3s ease .3s;
		}
		span:nth-child(5) {
			animation: moveTextlink1 .3s ease .3s;
		}
		span:nth-child(6) {
			animation: moveTextlink1 .3s ease .2s;
		}
		span:nth-child(7) {
			animation: moveTextlink1 .3s ease .1s;
		}
		span:nth-child(8) {
			animation: moveTextlink1 .3s ease;
		}
	}
}

テキストに色収差をつける

テキストリンクにマウスカーソルが乗ったときに、テキストの色がずれるアニメーションです。

テキストに色収差をつける1：ホバー中にテキストの色がずれる

テキストリンク1テキストリンク1テキストリンク1

テキストに色収差をつける2：ホバーしたらテキストの色がずれて収まる

テキストリンク2テキストリンク2テキストリンク2

index.html

// テキストに色収差をつける1
<p><a class="textlink textlink_color_type1" href="#">テキストリンク1<span>テキストリンク1</span><span>テキストリンク1</span></a></p>

// テキストに色収差をつける2
<p><a class="textlink textlink_color_type2" href="#">テキストリンク2<span>テキストリンク2</span><span>テキストリンク2</span></a></p>

style.css

// テキストに色収差をつける1
.textlink_color_type1 {
	display: inline-block;
	position: relative;
	transform: translate(0, 0);
	mix-blend-mode: multiply;
	color: rgba(0,0,255,1.0);
	transition: transform .1s ease-in;

	span:nth-child(1) {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		mix-blend-mode: multiply;
		color: rgba(0,255,0,1.0);
		transition: transform .1s ease-in;
	}
	span:nth-child(2) {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		mix-blend-mode: multiply;
		color: rgba(255,0,0,1.0);
		transition: transform .1s ease-in;
	}

	&:hover {
		transform: translate(0, 0);

		span:nth-child(1) {
			transform: translate(1.5px, 0);
		}
		span:nth-child(2) {
			transform: translate(-1.5px, 0);
		}
	}
}


// テキストに色収差をつける2
.textlink_color_type2 {
	display: inline-block;
	position: relative;
	transform: translate(0, 0);
	mix-blend-mode: multiply;
	color: rgba(0,0,255,1.0);
	transition: transform .1s ease-in;

	span:nth-child(1) {
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: multiply;
		color: rgba(0,255,0,1.0);
	}
	span:nth-child(2) {
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: multiply;
		color: rgba(255,0,0,1.0);
	}

	&:hover {
		transform: translate(0, 0);

		span:nth-child(1) {
			animation: colorTextlink1 .5s ease;
		}
		span:nth-child(2) {
			animation: colorTextlink2 .5s ease;
		}
	}
}

@keyframes colorTextlink1 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(2px, 0);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes colorTextlink2 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-2px, 0);
	}
	100% {
		transform: translate(0, 0);
	}
}

テキストリンクのCSSレシピ

style.css

テキストの色を変化させる

テキストリンク1：テキストの色が変化

テキストリンク2：テキストの色がグラデーションで変化

index.html

style.css

テキストの背景色を変化させる

テキストリンク1：背景色がフェードイン

テキストリンク2：背景色が左から右に向かって現れる

テキストリンク3：背景色が右から左に向かって現れる

テキストリンク4：背景色が上から下に向かって現れる

テキストリンク5：背景色が下から上に向かって現れる

テキストリンク6：背景色が点滅して現れる

index.html

style.css

テキストの下線を変化させる

テキストリンクの下線1：下線の色が変わる

テキストリンクの下線2：下線が中央から左右に広がる

テキストリンクの下線3：下線が左から右に向かって伸びる

テキストリンクの下線4：下線が右から左に向かって伸びる

テキストリンクの下線5：下線が下から上に向かって現れる

テキストリンクの下線6：下線が左から右に向かって伸び、右側に流れる

テキストリンクの下線7：下線が右から左に向かって伸び、左に流れる

index.html

style.css

テキストの二重下線を変化させる

テキストリンクの二重下線1：二重下線の色が変わる

テキストリンクの二重下線2：二重下線が中央から左右に広がる

テキストリンクの二重下線3：二重下線が左から右に向かって伸びる

テキストリンクの二重下線4：二重下線が右から左に向かって伸びる

テキストリンクの二重下線5：二重下線が左から右に向かって伸びて、右側に流れる

テキストリンクの二重下線6：二重下線が右から左に向かって伸びて、左側に流れる

index.html

style.css

テキストの上下の線を変化させる

テキストリンクの上下線1：上下の線の色が変わる

テキストリンクの上下線2：上下の線が中央から左右に広がる

テキストリンクの上下線3：上下の線が左から右に向かって伸びる

テキストリンクの上下線4：上下の線が右から左に向かって伸びる

テキストリンクの上下線5：上下の線が左から右に向かって伸びて、右側に流れる

テキストリンクの上下線6：上下の線が右から左に向かって伸びて、左側に流れる

index.html

style.css

点が伸びて線になる

点が伸びて線になる1

点が伸びて線になる2

点が伸びて線になる3

点が伸びて線になる4

index.html

style.css

アイコン画像を動かす

アイコン画像を動かす1：アイコン画像が右に動く

アイコン画像を動かす2：アイコン画像が左に動く

アイコン画像を動かす3：アイコン画像が奥に回転する

アイコン画像を動かす4：アイコン画像が縦軸で回転する

アイコン画像を動かす5：アイコン画像が時計回りに半回転する

index.html

style.css

テキストの影を変化させる

影を変化させる1：ぼんやりとした影が現れて浮き上がる演出

影を変化させる2：くっきりとした影が現れて浮き上がる演出

影を変化させる3：影が消えて押しているような演出

影を変化させる4：影が消えて押しているような演出

index.html

style.css

テキストを回転させる

テキストを回転させる1：テキスト全体が横を軸に回転

テキストを回転させる2：テキスト全体が縦を軸に回転

テキストを回転させる3：テキスト全体が時計回りに回転

テキストを回転させる4：1文字ずつ横を軸に回転

テキストを回転させる5：1文字ずつ縦を軸に回転

テキストを回転させる6：1文字ずつ時計回りに回転

index.html

style.css

テキストに動きをつける

テキストに動きをつける1：テキスト全体が横を軸に回転

テキストに動きをつける2：テキスト全体が縦を軸に回転

テキストに動きをつける3：テキスト全体が時計回りに回転

テキストに動きをつける4：1文字ずつ横を軸に回転