好看的CSS剪裁GIF背景图片动画特效

CodeAE

这是一款css剪裁GIF背景图片动画特效。该特效利用css的background-clip技术，将gif图片剪裁为文字效果，非常炫酷。
QQ录屏20230311214125.gif

HTML结构:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css剪裁GIF背景图片动画特效</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:900|Rye&display=swap" rel="stylesheet">
</head>
<body>
    <div class="htmleaf-container">

        <div class= "wrapper">
          <div class= "text" data-text= "2023">2023</div>
        <div>
    </div>
</body>
</html>

CSS样式：

.wrapper{
  background: #252854;
  width: 100%;
  height:500px;
  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(./img/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(./img/source.gif);
   background-clip: text;
   -webkit-background-clip: text;
   background-size: 43%;
 
}

[Html/CSS] 好看的CSS剪裁GIF背景图片动画特效

相关帖子

基于 HTML+CSS+JS 的石头剪刀布游戏

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

CSS3荧光灯文字闪烁动画特效

Mp4转换Gif小工具

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

CodeAE LV9