비전공자 개발일기

Foggy Rain Animation 본문

HTML _CSS

Foggy Rain Animation

HiroDaegu 2023. 1. 6. 08:45
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>FOGGY RAIN ANIMATION</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
</head>
<body>
    <div class="container">
        <div class="foggy">It's Rainning</div>
    </div>
</body>
</html>
body{
    min-height: 100vh;
    font: 150%/1.1 'Gaegu', cursive;
    padding-top: calc(50vh - 4em);
  }
  
  body, 
  .foggy, 
  .container:before{
    background: url('https://cdn.pixabay.com/photo/2015/09/09/21/31/rain-933490_960_720.jpg') 0 / cover fixed; 
  }
  
  .container{
    position: relative;
    margin: 0 auto;
    padding: 2em;
    max-width: 24em;
    background: hsla(0, 0%, 100%, 0.2) border-box;
    border-radius: 0.5em;
    box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.4);
    overflow: hidden;
  }
  
  .container:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    -webkit-filter: blur(50px);
    filter: blur(50px);
  }
  
  .foggy{
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 4em;
    text-align:center;
    user-select: none;
  }
  
  .raindrop {
  position: fixed;
  top: -50px;
  width: 2px;
  height: 30px;
  background-color: #D3D3D3;
  animation: rain 0.4s linear infinite;
  opacity: 0.2;
  z-index: -2;
  }
  
  @keyframes rain {
  from {
  left: Math.random() * window.innerWidth;
  }
  to {
  left: Math.random() * window.innerWidth;
  top: 100%;
    }
  }
for (let i = 0; i < 400; i++) {
  let drop = document.createElement("div");
  drop.classList.add("raindrop");
  document.body.appendChild(drop);

  drop.style.left = Math.random() * window.innerWidth + "px";
  drop.style.animationDelay = Math.random() * 4 + "s";
}
728x90
LIST

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

Ring Of Fire  (0) 2023.01.08
Animated Progress Bar  (0) 2023.01.07
Dynamic Calendar  (0) 2023.01.05
3D Happy New Year  (0) 2023.01.03
Starbucks Landing Page  (0) 2023.01.02
'HTML _CSS' Related Articles more