Traffic Light - CSS đèn xanh đỏ



DevForum chia sẻ các bạn cách code Đèn Xanh Đỏ giao thông chỉ với CSS ngắn gọn.
 

1. HTML

<div class="traffic-light">
		<div class="protector"></div>
		<div class="protector"></div>
		<div class="protector"></div>
		<div class="light-red"></div>
		<div class="light-yellow"></div>
		<div class="light-green"></div>
	</div>

2. CSS

body {
			margin: 0px;
			background: #fca701;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		.traffic-light {
			position: relative;
			background: #222;
			border-radius: 10px;
			padding: 16px;
			box-shadow: inset 0 0 0px 5px #2a2a2a;
		}

		.light-red,
		.light-yellow,
		.light-green {
			position: relative;
			margin: 16px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: repeating-linear-gradient(#333, #443 5px);
			animation-duration: 4s;
			animation-iteration-count: infinite;
			animation-timing-function: step-end;
		}

		.light-red {
			animation-name: lightUpRed;
		}

		.light-yellow {
			animation-name: lightUpYellow;
		}

		.light-green {
			animation-name: lightUpGreen;
		}

		@keyframes lightUpRed {
			0% {
				background: repeating-linear-gradient(#f00, #e00 5px);
				box-shadow: 0 0 40px #f00;
				z-index: 1;
			}
			35% {
				background: repeating-linear-gradient(#443, #333 5px);
				box-shadow: none;
				z-index: 0;
			}
		}

		@keyframes lightUpYellow {
			80% {
				background: repeating-linear-gradient(#fd0, #ec0 5px);
				box-shadow: 0 0 40px #fd0;
				z-index: 1;
			}
		}

		@keyframes lightUpGreen {
			35% {
				background: repeating-linear-gradient(#0d0, #0c0 5px);
				box-shadow: 0 0 40px #0d0;
				z-index: 1;
			}
			80% {
				background: repeating-linear-gradient(#443, #333 5px);
				box-shadow: none;
				z-index: 0;
			}
		}

		.protector {
			width: 100%;
			position: absolute;
			top: 25px;
			left: 50%;
			transform: translateX(-50%);
			border-right: solid 30px transparent;
			border-left: solid 30px transparent;
			border-top: solid 100px #191919;
			border-radius: 11px;
			z-index: -1;
		}

		.protector:nth-child(2) {
			top: 142px;
		}

		.protector:nth-child(3) {
			top: 257px;
		}

3. JAVASCRIPT


 


Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.