10月26日の作業データ - WEBサイト制作の勉強

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background-clipを使ったアニメーション</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<link rel="icon" href="favicon.png" type="image/png">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">
</head>
<body>
<header>
<h1>background-clip<span>background-clip</span></h1>
</header>
</body>
</html>

style.css

@charset "utf-8";

html,body,h1{
margin: 0;
padding: 0;
}
body{
overflow-x: hidden;
}
h1{
width: 100%;
height: 50vh;
line-height: 50vh;
background: url(../img/01.jpg) no-repeat center center/cover;
font-size: 180px;
-webkit-background-clip: text;/* Edge,chorme,Safari向け */
background-clip: text;/* Firefox向け-moz- */
color:transparent;/* 透明 */
font-family: 'Kanit', sans-serif;
text-indent: 3em;
white-space: nowrap;
animation: clip 10s 0.5s linear infinite;
}
@keyframes clip{
0%{text-indent: 3em;}
100%{text-indent: -7.3em;}
}
h1>span{
margin-left: 3em;
}

@media (max-width:640px){
h1{
font-size: 40px;
animation: clip 6s 0.5s linear infinite;
}

}