비전공자 개발일기

Text Animation & BG 본문

HTML _CSS

Text Animation & BG

HiroDaegu 2022. 9. 25. 09:34
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>TEXT ANIMATION N BG</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <h3>Wish u a happy</h3>
  <h1>T
     <div class="flower">
        <div class="inner-most-part"></div>
        <div class="middle-part" style="--t: 1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:-1"></div>
        <div class="middle-part" style="--t: -1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:1"></div>
     </div>
     okyo
     <div class="flower">
        <div class="inner-most-part"></div>
        <div class="middle-part" style="--t: 1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:-1"></div>
        <div class="middle-part" style="--t: -1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:1"></div>
     </div><br />
     D
     <div class="flower">
        <div class="inner-most-part"></div>
        <div class="middle-part" style="--t: 1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:-1"></div>
        <div class="middle-part" style="--t: -1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:1"></div>
     </div>aeg
     <div class="flower">
        <div class="inner-most-part"></div>
        <div class="middle-part" style="--t: 1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:-1"></div>
        <div class="middle-part" style="--t: -1; --l:0"></div>
        <div class="middle-part" style="--t: 0; --l:1"></div>
     </div>u
  </h1>
  <div class="rainBg"></div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
}
h3 {
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 100px;
  font-size: 5em;
  color: #e8505b;
  width: 100%;
}
.flower {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  animation: flower 5s linear infinite;
}
@keyframes flower {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.inner-most-part {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1c40f;
  z-index: 4;
}
.middle-part {
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background: #3498db;
  top: calc(50% - var(--t) * 20px);
  left: calc(50% - var(--l) * 20px);
  transform: translate(-50%, -50%);
}
.rainBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}
.rainBg i {
  position: absolute;
  top: -7%;
  width: 10px;
  height: 40px;
  border-radius: 10px;
  z-index: 1;
  animation: animate 6s linear;
}
@keyframes animate {
  0% {
    top: -7%;
  }
  100% {
    top: 100%;
  }
}
let colors = ['#318fb5', '#b52b65', '#2ecc71', '#f1c40f', '#e67e22', '#c0392b', '#9b59b6'];
setInterval(() => {
    let i = document.createElement('i');
    i.style.left = Math.floor(Math.random() * window.innerWidth) + 'px';
    i.style.background = colors[Math.floor(Math.random() * colors.length)]
    document.querySelector('.rainBg').appendChild(i);
}, 500);
setInterval(() => {
    document.querySelector('.rainBg').firstChild.remove();
}, 6000);
728x90
LIST

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

Responsive Email Subscription Form  (0) 2022.09.28
Animated Skills bar  (0) 2022.09.26
Slide Sign In & Up  (0) 2022.09.20
Corner Text Parallax Effects  (0) 2022.09.17
Gradient Circle Text  (0) 2022.09.15
'HTML _CSS' Related Articles more