merhaba arkadaşlar html ve css pek bilmiyorum yapmak istediğim index. html sayfasının küçülmesi durumunda değişken yazının değerlerinin değişmesi o kadar ?
sadece sayfanın boyutu değişince değerlerin değişmesi misal 500 pixelden küçükse şu değerlere geçsin animasyonu oraya bağlayamadım.
(((
html kodları
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="anim1">DEGİSKEN YAZI</h1>
<span class="anim1">Kucuk bilgiler büyük adımların baslangicidir</span>
</body>
</html>css kodu
@font-face{
font-family: 'Voto';
src: url('Voto.woff2') format('woff2');
}
html{
font-family: 'Voto', sans-serif;
padding: 80px;
}
h1 {
font-variation-settings: "wght" 130, "wdth" 185, "opsz" 72;
font-size: 100px;
margin: 0;
}
span {
font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
font-size: 40px;
text-transform: uppercase;
}
.anim1{
animation: anim1 2s infinite alternate;
}
@keyframes anim1{
from{
font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
}
to{
font-variation-settings: "wght" 130, "wdth" 185, "opsz" 72;
}
}