PJCHENder
4/26/2017 - 2:08 PM

[Flycan][CSS] lightbox, mobile-menu by transition

[Flycan][CSS] lightbox, mobile-menu by transition

transition_lighbox.html
content_copyfile_download

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style:none;
		}
		.lightbox{
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.3);
			position: fixed;
			top: 0;
			left: -100%;
			z-index: 10000;
			opacity: 0;

			/*transition:opacity 1s;*/
			transition:opacity 1s 1s,
					   left 0s 2s;

		}
		#box:checked ~ .lightbox{
			left: 0;
			opacity: 1;
			transition:opacity 1s;
		}
		.white{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 500px;
			height: 400px;
			background-color: #fff;
			opacity: 0;
			transition:opacity 1s;
		}
		#box:checked ~ .lightbox .white{
			opacity: 1;
			transition:opacity 1s 1s;
		}
		.white label{
			display: block;
			position: absolute;
			width: 30px;
			height: 30px;
			background-color: #000;
			color: #fff;
			right: -15px;
			top: -15px;
			border-radius: 50%;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
		}

		

	</style>
</head>
<body>
<input type="checkbox" name="" id="box">
<label for="box">open</label>





content................





<div class="lightbox">
	<div class="white">
		<label for="box">X</label>
	</div>
</div>
	
</body>
</html>
transition-mobile-menu.html
content_copyfile_download

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style:none;
		}
		#menu-control{ position: absolute; opacity: 0; }
		header{
			height: 40px;
			position: fixed;
			width: 100%;
			height: 40px;
			background-color: #fff;
			border-bottom: 1px solid #aaa;
		}
		.hb{
			font-size: 0px;
			position: absolute;
			width: 36px;
			height: 36px;
			background-color: #ccc;
			right: 4px;
			top: 2px;
		}
		.hb:before{
			content: '';
			position: absolute;
			width: 30px;
			height: 4px;
			background-color: #fff;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			box-shadow: 0px -8px 0px #fff,
						0px 8px 0px #fff;
		}
		#menu-control:checked ~ header .hb{
			background-color: #666;

		}
		nav{
			width: 200px;
			position: fixed;
			height: calc( 100vh - 41px );
			background-color: #000;
			left: -200px;
			top: 41px;
			transition: .5s cubic-bezier(.63,.22,.74,1.71);
		}
		#menu-control:checked ~ nav{ left: 0; }
		nav a{
			display: block;
			padding: 10px 20px;
			background-color: #000;
			color: #fff;
			border-bottom: 1px solid #fff;
		}
	</style>
</head>
<body>
	

<input type="checkbox" name="" id="menu-control">



<header>
	<label class="hb" for="menu-control">
		展開選單
	</label>
</header>

<nav>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
</nav>
	



</body>
</html>