CodeAE 发表于 2023-3-11 21:47:45

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

这是一款css剪裁GIF背景图片动画特效。该特效利用css的background-clip技术,将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%;

}http://www.htmleaf.com/css3/css3donghua/202001175892.html
页: [1]
查看完整版本: 好看的CSS剪裁GIF背景图片动画特效