HTML _CSS

Oxygen

HiroDaegu 2022. 9. 5. 00:48
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<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>OXYGEN</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>
    <span>c</span><span>o</span><span>&nbsp;is Carbon dioxide</span>
    <br>
    <i></i>
  </h2>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #CCC;
}

h2 {
  font-size: 6em;
  text-align: center;
}

h2 span {
  position: relative;
  display: inline-block;
  color: #03A9F4;
}

h2 span:nth-child(odd) {
  color: #414141;
  line-height: 1em;
  letter-spacing: -1em;
  overflow: hidden;
  transition: .5s ease-in-out;
}

h2:hover span:nth-child(odd) {
  letter-spacing: 0;
}

h2 span:nth-child(2) {
  margin-right: 10px;
  top: -8px;
}

h2 span:nth-child(2):before {
  content: '2';
  position: absolute;
  bottom: 0;
  right: -10px;
  font-size: .35em;
}

h2 i {
  position: absolute;
  transform: translateX(-50%);
  font-size: 24px;
  width: 400px;
  color: #777;
  font-weight: 400;
  font-style: initial;
  line-height: 1em;
}

h2 i::before {
  content: 'This is Oxygen';
  text-align: center;
  position: absolute;
  right: 10px;
  width: 100%;
  display: initial;
  transition: .5s;
}

h2:hover i::before {
  opacity: 0;
  letter-spacing: 2em;
}

h2 i::after {
  content: 'Let\'s save the earth';
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}

h2:hover i::after {
  opacity: 1;
  visibility: visible;
}
728x90
LIST