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

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

实用技巧 108 0 源码基地 本文共计2229个字，预计阅读时长8分钟。

    当前位置：
  1. 首页
  2. MG学院
  3. 实用技巧

简约字体设计，可变字体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);
}

 

餐饮类网站设计html，美食pbootcms网站模板源代码
上一篇 2022-12-09
html价格表模板，产品划分定价表模板
2022-12-09 下一篇

请务必线上支付，通过线下支付的出现任何问题平台均不担保！

相关推荐
css动画效果代码，促销动画特效素材下载双十二特效代码

css动画效果代码，促销动画特效素材下载双十二特效代码

css动画效果代码，促销动画特效素材下载双十二特效代码 演示：https:...

WordPress纯代码实现ajax评论无限加载教程

WordPress纯代码实现ajax评论无限加载教程

WordPress纯代码实现ajax评论无限加载教程评论AJAX加载方式的优点在于用...

炫酷的基于Threejs的高速运动动画特效

炫酷的基于Threejs的高速运动动画特效

炫酷的基于Threejs的高速运动动画特效一款炫酷的基于Threejs的高速运动动画...

黑白亮度背景切换代码

黑白亮度背景切换代码

黑白亮度背景切换代码js制作简单的网页黑白色背景切换，点击按钮明亮度背景颜色切换特效...

发表回复

登录... 后才能评论