코드랩 레퍼런스

Rotate Bar 본문

카테고리 없음

Rotate Bar

webstoryboy 2018. 1. 31. 20:27

See the Pen Rotate Bar by Webstoryboy (@webstoryboy) on CodePen.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Menu</title>
	<style>
		body {
			height: 100vh;
			background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		}

		.bar {
			width: 5px; height: 400px;
			background-color: #fff;
			position: absolute; left: 0; top: 0; right: 0; bottom: 0; 
			margin: auto;
			animation: bar 2s ease-in-out 100;
		}
		@keyframes bar {
			0% {height:0; transform: rotate(0deg);}
			30% {height:400px; transform: rotate(0deg);	}
			70% {height:400px; transform: rotate(180deg);}
			100% {height:0; transform: rotate(180deg);}
		}
	</style>
</head>
<body>
	<div class="bar"></div>
</body>
</html>


Share

Ad

Comments