目次
中心から外に線が伸びる(下部):
CSS のscale を使って、hoverをした時に線をX(横)方向に延ばす。
位置は絶対配置position:absolute; で指定する。
HTMLの書き方:
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-3-1.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-1 中心から外に線が伸びる(下部)
===================================*/
.gnavi li a{
/*線の基点とするためrelativeを指定*/
position: relative;
}
.gnavi li.current a,
.gnavi li a:hover{
color:#0481A2;
}
.gnavi li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 10%;
/*線の形状*/
width: 80%;
height: 2px;
background:#0481A2;
/*アニメーションの指定*/
transition: all .3s;
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
左から右に背景が伸びる:
CSS を使って、hover したときに要素の横幅・縦幅・不透明度を変更する。
自作の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-5 左から右に背景が伸びる
===================================*/
/*背景の設定*/
.gnavi li a{
/*背景色の基点とするためrelativeを指定*/
position: relative;
}
.gnavi li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
/*背景の形状*/
width: 0;
height:100%;
background:#0481A2;
/*アニメーションの指定*/
transition:all .5s;
opacity: 0;/*はじめは透過0*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
/*背景の形状*/
width: 100%;/*横幅を伸ばす*/
opacity: 1;/*不透明に*/
}
.gnavi li.current a,
.gnavi li a:hover{
color: #fff;
}
テキストが入れ替わる:
CSS を使い、絶対配置で中央寄せにした上下のテキストの下部分をoverflow:hidden; で隠す。
hoverをしたらtransform を使ってY方向にテキストを移動させて出現させる。
自作のCSS内の書き方:
/*==================================================
共通 横並びのための設定
===================================*/
.gnavi{
display: flex;
flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
margin:0 0 50px 0;
list-style: none;
}
.gnavi li a{
display: block;
text-decoration: none;
color: #333;
}
.gnavi li{
margin-bottom:20px;
}
/*==================================================
5-3-9 テキストが入れ替わる
===================================*/
.gnavi li a{
/*テキストの基点とするためrelativeを指定*/
position: relative;
/*はみ出る要素を隠す*/
overflow: hidden;
padding:10px 60px;
}
.gnavi li span{
/*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:0;
/*アニメーションの指定*/
transition: all .5s;
transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
/*ブロック要素にして透過なし、テキスト折り返しなし*/
display: block;
opacity:1;
white-space: nowrap;
}
/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
opacity:0;/*透過0に*/
transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}
/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
opacity:0;/*透過0に*/
transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}
.gnavi li:hover span:nth-child(2){
opacity:1;/*不透明に*/
transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}
線が伸びて枠線になる:
CSS で<li>と<span>の疑似要素(before とafter)に縦横幅を0 にした線を設定する。
hover すると疑似要素の横幅・縦幅が100% に伸びて線が表示される。
線が伸びるタイミングはtransition-delay で少しづつ遅らせる
自作の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;
}
/*==================================================
5-3-10 線が伸びて枠線になる
===================================*/
.gnavi li{
/*線の基点とするためrelativeを指定*/
position: relative;
margin:0 10px;
}
/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
background:#0481A2;
/*線の形状*/
width: 0;
height:2px;
/*アニメーションの指定*/
transition: all 0.2s linear;
}
.gnavi li::before{
right: 0;
bottom: 0;
}
.gnavi li::after{
left: 0;
top: 0;
}
/*線の基点位置2 spanタグ*/
.gnavi li span{
display: block;
}
.gnavi li span::before,
.gnavi li span::after{
content:"";
/*絶対配置で線の位置を決める*/
position: absolute;
background: #0481A2;
/*線の形状*/
width:2px;
height:0;
/*アニメーションの指定*/
transition: all 0.1s linear;
}
.gnavi li span::before{
left: 0;
bottom: 0;
}
.gnavi li span::after{
right: 0;
top: 0;
}
/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
width: 100%;
}
.gnavi li:hover::after{
transition-delay: 0s;/*すぐ線を出現させる*/
}
.gnavi li:hover::before{
transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
}
.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
height: 100%;
}
.gnavi li:hover span::before{
transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
}
.gnavi li:hover span::after{
transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
}
中心から外に線が伸びる(中央):
CSS のscale を使って、hoverをした時に線をX(横)方向に延ばす。位置は絶対配置position:absolute; で指定する。
自作の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-2 中心から外に線が伸びる(中央)
===================================*/
.gnavi li a{
/*線の基点とするためrelativeを指定*/
position: relative;
}
.gnavi li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
top:50%;
left: 10%;
/*線の形状*/
width: 80%;
height: 1px;
background: #666;
/*アニメーションの指定*/
transition: all .3s;
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
transform: scale(1, 1);/*X方向にスケール拡大*/
}
円が線に変化:
CSS のscale を使い、hover すると円の形になっていた線をX(横)方向にのばす。位置は絶対配置position:absolute; で指定する。
自作の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-8 円が線に変化
===================================*/
.gnavi li a{
/*円の基点とするためrelativeを指定*/
position: relative;
}
.gnavi li.current a,
.gnavi li a:hover{
color:#0481A2;
}
.gnavi li a::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
bottom: 0;
left: 0;
/*線になる丸の形状*/
width: 100%;
height: 5px;
border-radius: 50%;
background:#0481A2;
/*アニメーションの指定*/
transition: all .3s;
transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
transform-origin:center bottom;/*中央下部基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
height: 2px;/*縦幅を変化*/
border-radius: 0;/*丸みをなくす*/
transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}