最終更新日：
公開日：
レシピ
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;
}
}テキストの色を変化させる
テキストリンクにマウスカーソルが乗ったときにテキストの色を変化させます。
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;
}
}
}テキストの背景色を変化させる
テキストリンクにマウスカーソルが乗ったときにテキストの背景色を変化させます。
テキストリンク1：背景色がフェードイン
テキストリンク2：背景色が左から右に向かって現れる
テキストリンク3：背景色が右から左に向かって現れる
テキストリンク4：背景色が上から下に向かって現れる
テキストリンク5：背景色が下から上に向かって現れる
テキストリンク6：背景色が点滅して現れる
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：下線の色が変わる
テキストリンクの下線2：下線が中央から左右に広がる
テキストリンクの下線3：下線が左から右に向かって伸びる
テキストリンクの下線4：下線が右から左に向かって伸びる
テキストリンクの下線5：下線が下から上に向かって現れる
テキストリンクの下線6：下線が左から右に向かって伸び、右側に流れる
テキストリンクの下線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：二重下線の色が変わる
テキストリンクの二重下線2：二重下線が中央から左右に広がる
テキストリンクの二重下線3：二重下線が左から右に向かって伸びる
テキストリンクの二重下線4：二重下線が右から左に向かって伸びる
テキストリンクの二重下線5：二重下線が左から右に向かって伸びて、右側に流れる
テキストリンクの二重下線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：上下の線の色が変わる
テキストリンクの上下線2：上下の線が中央から左右に広がる
テキストリンクの上下線3：上下の線が左から右に向かって伸びる
テキストリンクの上下線4：上下の線が右から左に向かって伸びる
テキストリンクの上下線5：上下の線が左から右に向かって伸びて、右側に流れる
テキストリンクの上下線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);
}点が伸びて線になる
テキストリンクにマウスカーソルが乗ったときに上下左右の点が横に伸びて線になるアニメーションです。
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：アイコン画像が右に動く
アイコン画像を動かす2：アイコン画像が左に動く
アイコン画像を動かす3：アイコン画像が奥に回転する
アイコン画像を動かす4：アイコン画像が縦軸で回転する
アイコン画像を動かす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：ぼんやりとした影が現れて浮き上がる演出
影を変化させる2：くっきりとした影が現れて浮き上がる演出
影を変化させる3：影が消えて押しているような演出
影を変化させる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：テキスト全体が横を軸に回転
テキストを回転させる2：テキスト全体が縦を軸に回転
テキストを回転させる3：テキスト全体が時計回りに回転
テキストを回転させる4：1文字ずつ横を軸に回転
テキストを回転させる5：1文字ずつ縦を軸に回転
テキストを回転させる6：1文字ずつ時計回りに回転
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：テキスト全体が横を軸に回転
テキストに動きをつける2：テキスト全体が縦を軸に回転
テキストに動きをつける3：テキスト全体が時計回りに回転
テキストに動きをつける4：1文字ずつ横を軸に回転
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：ホバー中にテキストの色がずれる
テキストに色収差をつける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);
}
}こちらの記事は役に立ちましたか？
コメントありがとうございます！
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。