비전공자 개발일기

Scanner Animation 본문

HTML _CSS

Scanner Animation

HiroDaegu 2022. 4. 30. 00:11
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>Scanner Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scanner">
    <h1>Scanning...</h1>
  </div>
</body>
</html>
body {
  background-color: #6667ab;
}

.scanner h1 {
  color: #252839;
  font-size: 4rem;
  position: absolute;
}

.scanner h1:before {
  content: 'Scanning...';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-right: 4px solid red;
  box-shadow: 0 0 10px 10px #ff0000;
  overflow: hidden;
  color: red;
  animation: scan 4s linear infinite;
}

@keyframes scan {
  0%, 10%, 100% {
    width: 0;
  }
  60%, 80% {
    width: 100%;
  }
}
728x90
LIST

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

Card With Glass Effect  (0) 2022.05.03
Neon Text Glow Animation  (0) 2022.05.01
Love Animation  (0) 2022.04.29
Profile Card  (0) 2022.04.28
Endless Road Animation  (0) 2022.04.26
'HTML _CSS' Related Articles more