Tạo hiệu ứng quét barcode với css

Cập nhật: 21/12/2018 Lượt xem: 3223 [ Css ]

Barcode(mã vạch) là sự thể hiện thông tin trong các dạng nhìn thấy trên các bề mặt của sản phẩm, hàng hóa mà máy móc có thể đọc được.

Xem Demo

Dưới đây mình giớ thiệu đến các bạn 1 ví dụ nhỏ mô tả barcode và hiệu ứng quét barcode đơn giản bằng HTML & CSS.

HTML:

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
  <div class='spacer'></div>
  <div class='anim-box center spacer'>
    <div></div>
    <div class='scanner'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-md'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-md'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-lg'></div>
    <div class='anim-item anim-item-sm'></div>
    <div class='anim-item anim-item-md'></div> 
  </div>
  <div class='spacer'></div>
</body>

CSS:

body {
	font-family: Lato;
  font-weight: 400;
	background-color: #26282a;
	color: white;
}

.center {
	margin: 0 auto;
	text-align: center;
}

.spacer {
	margin-top: 6rem;
}

.anim-box {
	position: relative;
	width: 220px;
	height: 100px;
	padding: 25px 30px;
	transition: transform .6s ease-out;
}

.anim-box:before, .anim-box:after, .anim-box>:first-child:before, .anim-box>:first-child:after {
	position: absolute;
	width: 10%; height: 15%;
	border-color: white; 
	border-style: solid;
	content: ' ';
}

.anim-box:before {
	top: 0; left: 0;
	border-width: 2px 0 0 2px;
}

.anim-box:after {
	top: 0; right: 0;
	border-width: 2px 2px 0 0;
}

.anim-box>:first-child:before {
	bottom: 0; right: 0;
	border-width: 0 2px 2px 0;
}

.anim-box>:first-child:after {
	bottom: 0; left: 0;
	border-width: 0 0 2px 2px;
}

.anim-item {
	display: inline-block;
	background-color: white;
	height: 100px;
}

.anim-item-sm {
	width: 2px;
	margin-right: 3px;
}

.anim-item-md {
	width: 3px;
	margin-right: 2px;
}

.anim-item-lg {
	width: 5px;
	margin-right: 5px;
}

.anim-box:hover {
	transform: scale(1.5, 2);
}

.anim-box:hover .scanner {
  animation-play-state: running;
}

.scanner {
	width: 100%;
	height: 3px;
	background-color: red;
  opacity: 0.7;
  position:relative;
  box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
  top:50%;
  animation-name: scan;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

@keyframes scan {
  0% {
    box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
    top: 50%;
  }  
  25% {
    box-shadow: 0px 6px 8px 10px rgba(170, 11, 23, 0.49);
    top: 5px;
  }
  75% {
    box-shadow: 0px -6px 8px 10px rgba(170, 11, 23, 0.49);
    top: 98%;
  }
}

Chúc các bạn thành công!