비전공자 개발일기

Card With Glass Effect 본문

HTML _CSS

Card With Glass Effect

HiroDaegu 2022. 5. 3. 00:27
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>CARD WITH GLASS EFFECT</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <article class="card">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="card_inner"></div>
  </article>
</body>
</html>
.card {
  width: 150px;
  height: 200px;
  position: relative;
}

.card_inner {
  width: inherit;
  height: inherit;
  background-color: rgba(255, 255, 255, .05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}

.circle {
  width: 100px;
  height: 100px;
  background: radial-gradient(#b0e633, #53ef7d);
  border-radius: 50%;
  position: absolute;
  animation: move-up 2s ease-in infinite alternate-reverse;
}

.circle:nth-child(1) {
  top: -25px;
  left: -25px;
}

.circle:nth-child(2) {
  bottom: -25px;
  right: -25px;
  animation-name: move-down;
}

@keyframes move-up {
  to {
    transform: translateY(-10px);
  }
}

@keyframes move-down {
  to {
    transform: translateY(10px);
  }
}
728x90
LIST

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

Floating Text  (0) 2022.05.07
Instagram Notification Animation  (0) 2022.05.06
Neon Text Glow Animation  (0) 2022.05.01
Scanner Animation  (0) 2022.04.30
Love Animation  (0) 2022.04.29
'HTML _CSS' Related Articles more