FACE_ART
face_art는 얼굴을 0과 1로 이루어진 숫자로 모자이크형태로 만든 새로운 예술입니다.
코드
HTML
<!DOCTYPE html>
<html lang="en">
<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>face_art</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p class="art"></p>
</section>
</body>
<script>
let p = document.querySelector('.art');
let decimal = parseInt(Math.random()*Math.pow(10,20));
let binary = decimal.toString(2);
for (let i = 0; i < binary.length; i++) {
p.innerHTML += binary+binary;
}
</script>
</html>CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
height: 100vh;
overflow: hidden;
word-break: break-all;
background: #fff;
}
.art {
color: #fff;
writing-mode: horizontal-tb;
position: relative;
font-size: 0.9em;
letter-spacing: 0.2em;
line-height: 0.8em;
background: url(./image/htmlcssjavascript.png),
url(./image/htmlcssjavascript.png);
background-position: center;
background-attachment: fixed;
background-size: 800px 600px;
background-repeat: no-repeat;
background-blend-mode: color-dodge;
-webkit-background-clip: text;
color: transparent;
animation: number 50s infinite;
animation-direction: normal;
animation-timing-function: linear;
}
@keyframes number {
0% {
letter-spacing: 0.1em;
}
10% {
letter-spacing: 0.2em;
}
20% {
letter-spacing: 0.3em;
}
30% {
letter-spacing: 0.4em;
}
40% {
letter-spacing: 0.5em;
}
50% {
letter-spacing: 0.6em;
}
60% {
letter-spacing: 0.7em;
}
70% {
letter-spacing: 0.8em;
}
80% {
letter-spacing: 0.9em;
}
90% {
letter-spacing: 1em;
}
100% {
letter-spacing: 1.1em;
}
}
AllTimeDevelop