CSS3剪裁GIF背景图片动画特效

最新推荐文章于 2023-12-06 22:45:23 发布

卡夫卡的baby

最新推荐文章于 2023-12-06 22:45:23 发布

阅读量381

点赞数 1

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125966096

版权

本文介绍了如何使用CSS3的clip属性和关键帧动画来创建GIF背景图片的动态剪裁效果，提供了一段HTML和CSS样式的示例代码，并展示了预览效果。

摘要由CSDN通过智能技术生成

CSS3剪裁GIF背景图片动画特效

html：

<div class="text" data-text="2022">2022</div>

CSS样式：

<title>CSS3剪裁GIF背景图片动画特效</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #252854;
        }
        .text{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            flex: 0 0 100%;
            font-size: 15rem;
            font-weight: 900;
            color: #00000000;
            text-align: center;
            font-family: 'Lato',sans-serif;
            border-bottom: 1px solid #d4d7ff;
            border-top: 1px solid #d4d7ff;
            background: url(./img/1.gif);
            background-clip: text;
            -webki