其他
【每日一练】04—CSS 创意菜单栏的文本动画效果
写在前面
今天是【每日一练】的第4练，是我们坚持练习的第4天。
但是今天练习的小项目是我们之前在视频号上分享过，但是没有把源码分享出来，于是，就有小伙伴来问，这个案例的源码，今天，我就把这个作为一个小练习，把源码分享给大家，希望对你有帮助。
具体效果，可以查看下面的视频：
<!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>*{ 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));}写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
如果你觉得有用的话，欢迎关注我们的视频号，我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号