Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Emoticon Mengantuk</title>
	<style>
		.sleepy-face {
			display: inline-block;
			position: relative;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #FEE12B;
			overflow: hidden;
		}
		.sleepy-face:before {
			content: '';
			position: absolute;
			top: 35px;
			left: 15px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #fff;
		}
		.sleepy-face:after {
			content: '';
			position: absolute;
			top: 35px;
			right: 15px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #fff;
		}
		.sleepy-face > .sleepy-eyes {
			position: absolute;
			top: 45px;
			left: 50%;
			transform: translateX(-50%);
			width: 20px;
			height: 10px;
			background-color: #000;
			border-radius: 5px;
			animation: blink 5s infinite;
		}
		.sleepy-face > .sleepy-eyes:before,
		.sleepy-face > .sleepy-eyes:after {
			content: '';
			position: absolute;
			top: -5px;
			width: 10px;
			height: 20px;
			background-color: #000;
			border-radius: 5px;
		}
		.sleepy-face > .sleepy-eyes:before {
			left: -20px;
		}
		.sleepy-face > .sleepy-eyes:after {
			right: -20px;
		}
		@keyframes blink {
			0%, 100% {
				height: 10px;
			}
			50% {
				height: 0;
			}
		}
	</style>
</head>
<body>
	<div class="sleepy-face">
		<div class="sleepy-eyes"></div>
	</div>
</body>
</html>
Editor is loading...