其他
【每日一练】64—CSS实现彩虹文字的动画效果
写在前面
最近有好几个小伙伴来问我，说【每日一练】里的gif动画是用什么软件录制的，在这里，我统一说一下，我录gif动画的工具是，LICEcap，录出来的文件，是默认为gif格式的。
在这里，我也把这个gif录屏软件分享给大家，如果有需要的小伙伴，请自行下载获取：
说完了软件，我们再一起来看看今天的练习案例，我们今天练习的这个案例是一个文本动画效果，可以无限循环的动画效果，动画的快慢可以自行设置，我这里设置的是3s，如果想快一点或者慢一点，可以通过以下代码来修改它的速度。
animation: swing 3s infinite;现在，我们一起来看一下它的最终效果：
看完了效果，我们再一起来看一下，它们的实现代码。
<htm> <head> <meta charset="UTF-8"> <title>【每日一练】64-CSS实现彩虹文字的动画效果</title> </head> <body> <h1 data-text= "web前端开发">web前端开发</h1> </body></htm> 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：关于这个文本动画的效果，我在视频号上也分享了一些，还没有关注我视频号的小伙伴，请记得一点要去关注一下，以免错过我的每一期案例分享。
学习更多技能
请点击下方公众号