其他
【每日一练】74—CSS 实现的一款炫酷文字动画效果
写在前面
国庆假期过半，我们的【每日一练】专栏内容，也来到了74练，今天练习的这个小项目，是一个文字动画效果，最终效果如下：
<!DOCTYPE html><html><head><title>【每日一练】74—CSS 实现的一款炫酷文字动画效果</title></head><body> <h2 data-text=" ♠ 好玩又有趣的CSS动画效果 ♣ "> ♠ 好玩又有趣的CSS动画效果♣ </h2></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: #111;}h2 { position: relative; font-size: 8em; color: #222;}h2::before { content: attr(data-text); position: absolute; white-space: nowrap; color: #fff; overflow: hidden; border-right: 4px solid #fff; animation: animate 8s linear infinite; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 50px #fff);
}@keyframes animate { 0%,10%,100% { width: 0; } 70%,90% { width: 100%; }}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
另外，关于这个文字动画效果，我在视频号上也分享过一些，如果你还没有关注我的视频号的话，请记得关注我的视频号，以免错过我与你分享的精彩内容。
学习更多技能
请点击下方公众号