其他
【每日一练】65—CSS实现文本裁切gif动画效果
今天这个练习是一个文本剪辑GIF图片后得到的动画效果，最终效果如下：
具体的代码实现过程，可以看后面的HTML与CSS代码，这个里面的gif图片已经采用线上地址了，因此，就没有图片素材了，大家可以直接获取。
具体代码如下:
<html> <head> <meta charset="UTF-8"> <title>【每日一练】65—CSS实现文本裁切gif动画效果</title> </head> <body> <div class= "box"> <div class= "text" data-text= "web2022"> web2022</div> <div> </body></html>.box{ background: #252854; height: 97vh; border-radius: 5px; position: relative; }.text{ flex: 0 0 100%; font-size: 14rem; font-weight: 900; color: #00000000; text-align: center; font-family: 'Lato', sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-bottom: 1px solid #d4d7ff; border-top: 1px solid #d4d7ff; background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif); background-clip: text; -webkit-background-clip: text;} .text:after{ content: attr(data-text); -webkit-text-stroke: 1.5px #d4d7ff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -49%); background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif); background-clip: text; -webkit-background-clip: text; background-size: 43%;}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号