비전공자 개발일기

Text Animation 본문

HTML _CSS

Text Animation

HiroDaegu 2022. 8. 5. 00:22
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</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2 data-text="&nbsp;♠ POKER ♣&nbsp;">&nbsp;♠ POKER ♣&nbsp;</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: #111;
}

h2 {
  position: relative;
  font-size: 6em;
  color: #222;
}

h2::before {
  content: attr(data-text);
  position: absolute;
  color: #FFF;
  width: 350px;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid #FFF;
  filter: drop-shadow(0 0 20px #FFF) drop-shadow(0 0 50px #FFF);
  animation: animate 8s linear infinite;
}

@keyframes animate {
  0%, 10%, 100% {
    width: 0;
  }
  70%, 90% {
    width: 100%;
  }
}
728x90
LIST

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

3D Animation Effect  (0) 2022.08.08
Scroll To Top  (0) 2022.08.06
Sidebar Menu  (0) 2022.08.04
Firework  (0) 2022.08.01
Neumorphism Custom Range Slider  (0) 2022.07.30
'HTML _CSS' Related Articles more