简约字体设计，可变字体css

字体特效能够让网页更生动起来，这款简约字体设计，可变字体css素材，该素材实现了字体变形的动画特效，可自由编辑文本，简单实用，喜欢的小伙伴不要错过哟。
index文件
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>17sucai - CSS only Variable font demo using Decovar Regular</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<h1 contenteditable>Hello</h1>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

script.js文件

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

style.css文件

@font-face {
  font-family: "Decovar Regular24";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");
}
h1 {
  margin: 0;
  font-size: 20vw;
  font-family: "Decovar Regular24";
  color: white;
  font-variation-settings: "SSTR" 1000;
  -webkit-animation: loadin 4s infinite linear;
          animation: loadin 4s infinite linear;
}

@-webkit-keyframes loadin {
  0% {
    font-variation-settings: "SSTR" 1000;
  }
  50% {
    font-variation-settings: "SSTR" 0;
  }
}

@keyframes loadin {
  0% {
    font-variation-settings: "SSTR" 1000;
  }
  50% {
    font-variation-settings: "SSTR" 0;
  }
}
html {
  height: 100%;
}

body {
  background: rgba(160, 160, 160, 0.1);
  overflow: hidden;
  height: 100%;
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7), 1px -1px 0 rgba(255, 255, 255, 0.7), -1px 1px 0 rgba(255, 255, 255, 0.7), 1px 1px 0 rgba(255, 255, 255, 0.7), -1px 2px 1px #a0a0a0, -2px 4px 2px #a0a0a0, -3px 6px 3px rgba(160, 160, 160, 0.6), -4px 8px 4px rgba(160, 160, 160, 0.5), -5px 10px 5px rgba(160, 160, 160, 0.4), -6px 12px 6px rgba(160, 160, 160, 0.3), -7px 13px 7px rgba(160, 160, 160, 0.2), -8px 15px 8px rgba(160, 160, 160, 0.2), -9px 17px 9px rgba(160, 160, 160, 0.2), -10px 19px 10px rgba(160, 160, 160, 0.2), -11px 20px 11px rgba(160, 160, 160, 0.1), -12px 22px 12px rgba(160, 160, 160, 0.1), -13px 24px 13px rgba(160, 160, 160, 0.1), -14px 26px 14px rgba(160, 160, 160, 0.1), -15px 28px 15px rgba(160, 160, 160, 0.1), -16px 30px 16px rgba(160, 160, 160, 0.1), -17px 32px 17px rgba(160, 160, 160, 0.1), -18px 34px 18px rgba(160, 160, 160, 0.1), -19px 36px 19px rgba(160, 160, 160, 0.1), -20px 38px 20px rgba(160, 160, 160, 0.1), -21px 39px 21px rgba(160, 160, 160, 0.1);
}

 

声明： 1、本站所有文章仅供参考，如有侵权 请联系我们删除 meng#yimiaonet.com #换成@ 2、文章大部分源自网络或ai生成，文章不作为任何依据，仅供参考。 3、本站的所有源码都是在网络上转载或由用户投稿，仅供参考学习使用，请您务必在下载后24小时内删除。 4、本站下载的所有源码等内容不得用于任何违反相关法律法规的用途，一经发现 我们立即向有关部门报备。 5、如果您需要商用，可以联系客服定制开发或购买商业源码栏目内的内容，当然也可以联系部分源码的原作者；我们最终一切版权。 6、您注册本站会员后，如果需要注销账号等适宜，请联系客服。