翻動導航條(css)

.nav {
position: relative;
}
.nav:after {
content: "";
width: 100%;
height: 2px;
background-color: #000;
position: absolute;
bottom: 27px;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.nav li {
margin-right: 30px;
position: relative;
}
.nav li:last-child {
margin-right: 0;
}
.nav a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
color: #000;
padding-bottom: 10px;
}
.nav a:before {
content: attr(data-hover-text);
color: #000;
position: absolute;
top: 30px;
left: 0;
opacity: 0;
font-size: 12px;
transition: opacity .3s ease;
}
.nav a:hover:before {
opacity: 1;
}

上面這些代碼展示了如何在導航條中實現翻動動畫。當鼠標移動到某個鏈接上時，該鏈接將翻轉并顯示背景，同時上面的文本也會改變。實現這一效果的關鍵在于使用:before偽元素來添加背景和動畫，同時使用transition屬性來使整個過程看起來動態而流暢。要使鏈接翻轉，我們可以使用transform: rotateY，其中Y指示沿著垂直軸進行旋轉。因為鏈接旋轉時，它也會移動位置，所以我們還需要使用position:absolute來使它固定在原始位置。