僕が持っている複数のサイトにアンカーリンクのデザインを適用する予定ですので、ここでメモする。
<style>
a {
text-decoration: none;
}
/*-------------------------------------------------
* アンダーバーFrom left to righ
*-------------------------------------------------*/
a.underline-left-to-right {
position: relative;
display: inline-block;
transition: .3s;
}
a.underline-left-to-right::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
}
a.underline-left-to-right:hover::after {
width: 100%;
}
/*-------------------------------------------------
* アンダーバーFrom center to outside
*-------------------------------------------------*/
a.underline-center-to-outside {
position: relative;
display: inline-block;
transition: .3s;
}
a.underline-center-to-outside::after {
position: absolute;
bottom: 0;
left: 50%;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
a.underline-center-to-outside:hover::after {
width: 100%;
}
/*-------------------------------------------------
* アンダーバーfadein
*-------------------------------------------------*/
a.underline-fadein {
position: relative;
display: inline-block;
transition: .3s;
}
a.underline-fadein::after {
position: absolute;
bottom: .3rem;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #2ecc71;
opacity: 0;
transition: .3s;
}
a.underline-fadein:hover::after {
bottom: 0;
opacity: 1;
}
/*-------------------------------------------------
* 背景色を下から上に塗る
*-------------------------------------------------*/
a.bgcolor-bottom-to-top {
background-position: 0 0;
background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(46,204,113,1) 50%);
background-size: auto 200%;
transition: .3s;
}
a.bgcolor-bottom-to-top:hover {
background-position: 0 100%;
color: #fff;
}
/*-------------------------------------------------
* 文字を拡大に表示
*-------------------------------------------------*/
a.font-scale {
display: inline-block;
transition: .1s;
}
a.font-scale:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: .8s;
transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0)
}
/*-------------------------------------------------
* tableのセルを拡大に表示
*-------------------------------------------------*/
table.cell-scale {
width: 450px;
border-collapse: collapse;
border: 1px #CCC solid;
}
table.cell-scale th, table.cell-scale td {
border: 1px #CCC solid;
width: 33%;
transition: .1s;
}
table.cell-scale td:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: .1s;
transition-timing-function: cubic-bezier(0.8, 0, 1.0, 1.0);
background: green;
}
</style>
<b>マウスをリンクに乗せてみてね:</b><br>
<hr>
<a href="https://www.benri.jp" class="underline-left-to-right">アンダーバーFrom left to right</a>
<br>
<a href="https://www.benri.jp" class="underline-center-to-outside">アンダーバーFrom center to outside</a>
<br>
<a href="https://www.benri.jp" class="underline-fadein">アンダーバーフェードイン</a>
<br>
<a href="https://www.benri.jp" class="bgcolor-bottom-to-top">背景色を下から上に塗る</a>
<br>
<a href="https://www.benri.jp" class="font-scale">文字を拡大</a> に表示する
<br><br>
<b>おまけ:</b>
<hr>
⇒テーブルのセルにマウスオーバーにすると、セルに色に塗りながら拡大に表示します。
<table class="cell-scale">
<tr>
<td>
内容1-1
</td>
<td>
内容1-2
</td>
<td>
内容1-3
</td>
</tr>
<tr>
<td>
内容2-1
</td>
<td>
内容2-2
</td>
<td>
内容2-3
</td>
</tr>
<tr>
<td>
内容3-1
</td>
<td>
内容3-2
</td>
<td>
内容3-3
</td>
</tr>
</table>
♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
zanmai @2016年03月31日
» ①②③④の順で設定できるはず。…