css变量实现文字字母遮罩图片动画效果代码-html代码-BFW代码库

css变量实现文字字母遮罩图片动画效果代码

代码语言：html

所属分类：动画

代码描述：css变量实现文字字母遮罩图片动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,100..1,900&display=swap" rel="stylesheet">
  
  
  
<style>
@font-face {
  font-family: "Roboto Flex";
  src: url("//repo.bfw.wiki/bfwrepo/font/RobotoFlex.woff2")
    format("woff2");
  font-weight: 1 999;
  font-style: oblique -10deg 360deg;
  font-stretch: 0% 999%;
}

@keyframes varifont {
  0% {
    font-variation-settings: "wght" 100, "slnt" 10, "wdth" 25, "opsz" 40,
      "GRAD" 0, "XTRA" 350, "YOPQ" 79, "YTAS" 750, "YTDE" -305, "YTFI" 738,
      "YTLC" 514, "YTUC" 712;
    letter-spacing: 20px;
    font-size: 200pt;
  }

  50% {
    font-variation-settings: "wght" 1000, "slnt" -20, "wdth" 120, "opsz" 144,
      "GRAD" 50, "XTRA" 603, "YOPQ" 100, "YTAS" 854, "YTDE" -98, "YTFI" 788,
      "YTLC" 570, "YTUC" 760;
    font-size: 100pt;
    letter-spacing: 5px;
  }

  100% {
    font-variation-settings: "wght" 100, "slnt" 10, "wdth" 25, "opsz" 40,
      "GRAD" 0, "XTRA" 350, "YOPQ" 79, "YTAS&qu.........完整代码请登录后点击上方下载按钮下载查看