写在前面
最近有好几个小伙伴来问我，说【每日一练】里的gif动画是用什么软件录制的，在这里，我统一说一下，我录gif动画的工具是，LICEcap，录出来的文件，是默认为gif格式的。
在这里，我也把这个gif录屏软件分享给大家，如果有需要的小伙伴，请自行下载获取：
下载地址： https://url81.ctfile.com/f/21793581-671158336-3e11c7?p=2698
密码: 2698
说完了软件，我们再一起来看看今天的练习案例，我们今天练习的这个案例是一个文本动画效果，可以无限循环的动画效果，动画的快慢可以自行设置，我这里设置的是3s，如果想快一点或者慢一点，可以通过以下代码来修改它的速度。
animation: swing 3s infinite;现在，我们一起来看一下它的最终效果：
看完了效果，我们再一起来看一下，它们的实现代码。
HTML代码：
<htm><head> <meta charset="UTF-8"> <title>【每日一练】64-CSS实现彩虹文字的动画效果</title> </head><body><h1 data-text= "web前端开发">web前端开发</h1> </body>
</htm>CSS代码：
h1{font-family:sans-serif;text-transform: lowercase;font-size: 12rem;text-align: center;display: flex;align-items: center;justify-content: center;margin: 0;position: relative;background: #333;color: #000;}h1:before{content: attr(data-text);position: absolute;background: linear-gradient( #9b5de5, #f15bb5, #fee440,#00bbf9, #00f5d4,#9b5de5);-webkit-background-clip: text;color: transparent;background-size: 100% 90%;line-height: 1.2;clip-path: ellipse(150px 150px at -2.54% -9.25%);animation: swing 3s infinite;animation-direction: alternate;}@keyframes swing{0%{-webkit-clip-path: ellipse(150px 150px at -2.54% -9.25%)clip-path: ellipse(150px 150px at -2.54% -9.25%)}50%{-webkit-clip-path: ellipse(150px 150px at 49.66% 64.36%);clip-path: ellipse(150px 150px at 49.66% 64.36%);}100%{-webkit-clip-path: ellipse(150px 150px at 102.62% -1.61%;);clip-path: ellipse(150px 150px at 102.62% -1.61%);}}p{color:#222;text-align:center;font-size:22px;}写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
PS：关于这个文本动画的效果，我在视频号上也分享了一些，还没有关注我视频号的小伙伴，请记得一点要去关注一下，以免错过我的每一期案例分享。
学习更多技能
请点击下方公众号
