寫在前面
今天是【每日一練】的第4練，是我們堅持練習的第4天。
但是今天練習的小項目是我們之前在視訊号上分享過，但是沒有把源碼分享出來，于是，就有小夥伴來問，這個案例的源碼，今天，我就把這個作為一個小練習，把源碼分享給大家，希望對你有幫助。
具體效果，可以檢視下面的視訊：
HTML代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS創意菜單欄的文本動畫效果</title>
</head>
<body>
<ul>
<li style="--clr:#00ade1;">
<a href="#" data-text=" Home"> Home </a>
</li>
<li style="--clr:#ff6493;">
<a href="#" data-text=" About"> About </a>
</li>
<li style="--clr:#ffdd1c;">
<a href="#" data-text=" Services"> Services </a>
</li>
<li style="--clr:#00dc82;">
<a href="#" data-text=" Team"> Team </a>
</li>
<li style="--clr:#dc00d4;">
<a href="#" data-text=" Contact"> Contact </a>
</li>
</ul>
</body>
</html> CSS代碼如下：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul
{
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li
{
position: relative;
list-style: none;
}
ul li a
{
position: relative;
font-size: 4em;
text-decoration: none;
color: transparent;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
-webkit-text-stroke: 1px rgba(255,255,255,0.5);
}
ul li a::before
{
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0%;
overflow: hidden;
border-right: 8px solid var(--clr);
transition: 1s;
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover:before
{
width: 100%;
filter: drop-shadow(0 0 25px var(--clr));
} 寫在最後
以上就是每日一練的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
如果你覺得有用的話，歡迎關注我們的視訊号，我是楊小愛，我們明天見。
