<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
<style>@charset "utf-8";
/*==================================================
共通 横並びのための設定
===================================*/
.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;
}
/*==================================================
テキストが入れ替わる
===================================*/
.gnavi li a {
/*テキストの基点とするためrelativeを指定*/
position: relative;
/*はみ出る要素を隠す*/
overflow: hidden;
padding: 10px 60px;
}
.gnavi li span {
/*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top: 0;
/*アニメーションの指定*/
transition: all 0.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; /*不透明に*/
color: rgba(249, 143, 253, 1);
transform: translate(-50%, 0); /*X方向に-50% Y方向に0*/
}
/*========= レイアウトのためのCSS ===============*/
.lead {
padding: 30px 20px;
}</style>
</head>
<body>
<body>
<p class="lead">マウスポインタをメニューの上に持ってきて</p>
<ul class="gnavi">
<li class="current">
<a href="#">
<span>Home</span>
<span>
<i class="fas fa-home">
</i> ホーム</span>
</a>
</li>
<li>
<a href="https://web-navigator.com/">
<span>About</span>
<span>
<i class="fas fa-users">
</i> WEB先案内</span>
</a>
</li>
<li>
<a href="#">
<span>Service</span>
<span>
<i class="fas fa-hand-holding-heart">
</i> サービス</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
<span>
<i class="fas fa-headset">
</i> お問い合わせ</span>
</a>
</li>
</ul>
<script>
</script>
</body>
</html>