Problem Solving
[CSS] Requirements Q14, Q15: Text
Isaac S. Lee
2023. 10. 12. 16:13
📌Requirements Q14
<!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="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body {
background-color: #222;
/* overflow: hidden; */
}
#text {
text-align: center;
margin-top: 400px;
font-variant: small-caps;
}
#text span {
color: white;
font-size: 7em;
font-family: Arial;
display: inline-block;
transform: scale(50, 50);
opacity: 0;
animation-name: spanKey;
animation-fill-mode: forwards;
animation-duration: .5s;
animation-timing-function: ease-out;
}
@keyframes spanKey {
0% {
transform: scale(50, 50);
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}
#text span:nth-child(2) {
animation-delay: .15s;
}
#text span:nth-child(3) {
animation-delay: .3s;
}
#text span:nth-child(4) {
animation-delay: .45s;
}
#text span:nth-child(5) {
animation-delay: .6s;
}
#text span:nth-child(6) {
animation-delay: .75s;
}
#text span:nth-child(7) {
animation-delay: .9s;
}
#text span:nth-child(8) {
animation-delay: 1.05s;
}
#text span:nth-child(9) {
animation-delay: 1.2s;
}
#text span:nth-child(10) {
animation-delay: 1.35s;
}
#text span:nth-child(11) {
animation-delay: 1.5s;
}
#text span:nth-child(12) {
animation-delay: 1.65s;
color: gold;
}
</style>
</head>
<body>
<div id="text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>!</span>
<span></span>
<span>H</span>
<span>T</span>
<span>M</span>
<span>L</span>
<span><i class="fab fa-html5"></i></span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="source" style="width:700px; margin-right: auto; margin-left: auto; color: white;">source code</h2>
<textarea style="width:700px; height: 500px; margin-right: auto; margin-left: auto; display: block;">
<!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="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body {
background-color: #222;
overflow: hidden;
}
#text {
text-align: center;
margin-top: 400px;
font-variant: small-caps;
}
#text span {
color: white;
font-size: 7em;
font-family: Arial;
display: inline-block;
}
</style>
</head>
<body>
<div id="text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>!</span>
<span></span>
<span>H</span>
<span>T</span>
<span>M</span>
<span>L</span>
<span><i class="fab fa-html5"></i></span>
</div>
</body>
</html>
</textarea>
</body>
</html>
📌Requirements Q15
<!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="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body {
background-color: #222;
/* overflow: hidden; */
}
#text {
text-align: center;
margin-top: 400px;
font-variant: small-caps;
/* border: 10px solid white; */
}
#text span {
color: white;
font-size: 7em;
font-family: Arial;
display: inline-block;
animation-name: spanKey1;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-timing-function: ease-out;
transform: translate(2000px, 0px);
}
@keyframes spanKey1 {
0% {
transform: translate(2000px, 0px);
}
100% {
transform: translate(0px, 0px) rotate(-1800deg);
}
}
#text span:nth-child(2) {
animation-delay: .15s;
}
#text span:nth-child(3) {
animation-delay: .3s;
}
#text span:nth-child(4) {
animation-delay: .45s;
}
#text span:nth-child(5) {
animation-delay: .6s;
}
#text span:nth-child(6) {
animation-delay: .75s;
}
#text span:nth-child(7) {
animation-delay: .9s;
}
#text span:nth-child(8) {
animation-delay: 1.05s;
}
#text span:nth-child(9) {
animation-delay: 1.2s;
}
#text span:nth-child(10) {
animation-delay: 1.35s;
}
#text span:nth-child(11) {
animation-delay: 1.5s;
}
#text span:nth-child(12) {
animation-delay: 1.65s;
color: gold;
}
</style>
</head>
<body>
<div id="text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>!</span>
<span></span>
<span>H</span>
<span>T</span>
<span>M</span>
<span>L</span>
<span><i class="fab fa-html5"></i></span>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="source" style="width:700px; margin-right: auto; margin-left: auto; color: white;">source code</h2>
<textarea style="width:700px; height: 500px; margin-right: auto; margin-left: auto; display: block;">
<!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="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body {
background-color: #222;
overflow: hidden;
}
#text {
text-align: center;
margin-top: 400px;
font-variant: small-caps;
}
#text span {
color: white;
font-size: 7em;
font-family: Arial;
display: inline-block;
}
</style>
</head>
<body>
<div id="text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>!</span>
<span></span>
<span>H</span>
<span>T</span>
<span>M</span>
<span>L</span>
<span><i class="fab fa-html5"></i></span>
</div>
</body>
</html>
</textarea>
</body>
</html>