すでに custom_role 権限グループは存在します。「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想 - CodePool

CodePoooooooo

下線テキストにホバーアニメーションを実装する方法

アニメーション

2020/04/20

こんにちは、中の人です。
今回は、テキストの下線にホバーアニメーションを実装する方法をご紹介します。

もくじIndex

下準備
サンプル1 – 「transform: scale();」でサイズを可変してみる
サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる
サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる
解説

下準備

まずは、擬似要素を用いてaタグに下線を表示させます。
この時、borderプロパティではなくbackgroundプロパティで表示させます。

■HTML
テキストリンク

■CSS
.example-0 {
	line-height: 2.5em;
	position: relative;
}
.example-0:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
}

テキストリンク

アニメーションを実装する

サンプル1 – 「transform: scale();」でサイズを可変してみる

■HTML
テキストリンク

■CSS
.example-1 {
	line-height: 2.5em;
	position: relative;
}
.example-1:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transition: transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-1:hover:after {
	transform: scaleX(1);
}

テキストリンク

サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる

■HTML
テキストリンク

■CSS
.example-2 {
	line-height: 2.5em;
	position: relative;
}
.example-2:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-2:hover:after {
	transform: scaleX(1);
	transform-origin: left;
}

テキストリンク

サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる

■HTML
テキストリンク

■CSS
.example-3 {
	line-height: 2.5em;
	position: relative;
}
.example-3:after {
	content: '';
	background: rgba(0, 0, 0, .5);
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease;
	height: 1px;
	width: 100%;
}
.example-3:hover:after {
	opacity: 1;
	transform: translateY(0);
}

テキストリンク

解説

今回は、擬似要素をtransformプロパティでサイズや位置を可変させる方法をご紹介しました。
もちろん、過去の記事でご紹介したborderプロパティで下線を表示させる方法にも適用できます。

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR