<!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);
}
评论(0)