비전공자 개발일기

3D Text Animation Effect 본문

HTML _CSS

3D Text Animation Effect

HiroDaegu 2022. 6. 27. 20:59
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>3D TEXT ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box">
      <!-- 360 / 16 = 22.5deg -->
      <span style="--i:1"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:2"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:3"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:4"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:5"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:6"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:7"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:8"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:9"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:10"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:11"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:12"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:13"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:14"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:15"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:16"><i>Avengers</i><i>A</i>ssemble</span>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .box {
  transform-style: preserve-3d;
  animation: animate 25s linear infinite;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0) rotate(25deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotate(25deg);
  }
}

.container .box span {
  position: absolute;
  color: #FFF;
  font-size: 3.5em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 10px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .5), transparent);
  line-height: .76em;
  transform-style: preserve-3d;
  text-shadow: 0 5px 15px rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(106px); 
}

.container .box span i:nth-child(1) {
font-style: inherit;
color: #FF246F;
}

.container .box span i:nth-child(2) {
font-style: inherit;
color: #12B5FF;
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Google Search Clone  (0) 2022.07.01
Arrow Magic Menu Indicator  (0) 2022.06.28
Animated Hot Cup of Tea  (0) 2022.06.26
Dark Card Hover Effect  (0) 2022.06.25
Animated Magic Menu Indicator  (0) 2022.06.24
'HTML _CSS' Related Articles more