写在前面
今天是【每日一练】的第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));
} 写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，并将它分享给你身边做开发的朋友，也许能够帮助到他。
如果你觉得有用的话，欢迎关注我们的视频号，我是杨小爱，我们明天见。
