テキストナビゲーション
-左から右に線が伸びて背景になる-
See the Pen 5-3-6 左から右に線が伸びて背景になる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
PCのみ確認できます。「Result」内のテキストにカーソルをあわせて動きを確かめてね!
動きを実現する仕組み
CSS を使って、hover したときに要素の横幅・縦幅・不透明度を変更する。
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-3-6.css"> </head>
- body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。
<ul class="gnavi"> <li class="current"><a href="#">Home</a></li><!--現在地にはcurrentクラスを付ける--> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul>
自作のCSS内の書き方
/*==================================================
共通 横並びのための設定
===================================*/
.gnavi{
display: flex;
flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
margin:0 0 50px 0;
list-style: none;
}
.gnavi li a{
display: block;
padding:10px 30px;
text-decoration: none;
color: #333;
}
.gnavi li{
margin-bottom:20px;
}
/*==================================================
5-3-6 左から右に線が伸びて背景になる
===================================*/
/*背景の設定*/
.gnavi li a{
/*背景色の基点とするためrelativeを指定*/
position: relative;
/*アニメーションの指定*/
transition: all .7s;
}
.gnavi li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
/*背景の形状*/
width: 0;
height: 1px;
background:#0481A2;
opacity: 0;/*はじめは透過を0に*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
/*背景の形状*/
width: 100%;
opacity: 1;
/*アニメーションの指定*/
animation:bgappear 0.5s forwards;
}
/*アニメーションで線を伸ばして背景をつける*/
@keyframes bgappear{
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #0481A2;
}
}
/*現在地とhoverの設定*/
.gnavi li.current a,
.gnavi li a:hover{
color: #fff;
/*テキストを最前面へ*/
z-index: 1;
}
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!