master

分支 (1)

管理

管理

master

Canvas
/
index.html

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Index</title>
			<style type="text/css">
				*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body:before,body:after{content:"";display:block;height:50%;background:#00bdea}body:after{background:#208FF9}.nav{overflow:hidden;position:absolute;left:50%;top:50%;width:auto;height:90px;margin-top:-45px;background:#fff;border-radius:5px;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);box-shadow:0 10px 35px rgba(0,0,0,.2)}.nav__cb{z-index:-1000;position:absolute;left:0;top:0;opacity:0;pointer-events:none}.nav__content{position:relative;width:90px;height:100%;-webkit-transition:width 1s cubic-bezier(0.49,-.3,.68,1.23);transition:width 1s cubic-bezier(0.49,-.3,.68,1.23)}.nav__cb:checked~.nav__content{-webkit-transition:width 1s cubic-bezier(0.48,.43,.29,1.3);transition:width 1s cubic-bezier(0.48,.43,.29,1.3);width:410px}.nav__items{position:relative;width:410px;height:100%;padding-left:20px;padding-right:110px;list-style-type:none;font-size:0}.nav__item{display:inline-block;vertical-align:top;text-align:center;color:#6C7784;font-size:14px;line-height:90px;font-family:Helvetica,Arial,sans-serif;font-weight:700;-webkit-perspective:1000px;perspective:1000px;-webkit-transition:color .3s;transition:color .3s;cursor:pointer}.nav__item:hover{color:#00bdea}.nav__item-text{display:block;height:100%;padding:0 10px;-webkit-transform:rotateY(-70deg);transform:rotateY(-70deg);opacity:0;-webkit-transition:opacity .7s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5);transition:opacity .7s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5);transition:transform .7s cubic-bezier(0.48,.43,.7,2.5),opacity .7s;transition:transform .7s cubic-bezier(0.48,.43,.7,2.5),opacity .7s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5)}.nav__cb:checked~.nav__content .nav__item-text{-webkit-transform:rotateY(0);transform:rotateY(0);opacity:1;-webkit-transition:opacity .2s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5);transition:opacity .2s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5);transition:transform .7s cubic-bezier(0.48,.43,.7,2.5),opacity .2s;transition:transform .7s cubic-bezier(0.48,.43,.7,2.5),opacity .2s,-webkit-transform .7s cubic-bezier(0.48,.43,.7,2.5)}.nav__item:nth-child(1) .nav__item-text{-webkit-transition-delay:.3s;transition-delay:.3s}.nav__cb:checked~.nav__content .nav__item:nth-child(1) .nav__item-text{-webkit-transition-delay:0s;transition-delay:0s}.nav__item:nth-child(2) .nav__item-text{-webkit-transition-delay:.2s;transition-delay:.2s}.nav__cb:checked~.nav__content .nav__item:nth-child(2) .nav__item-text{-webkit-transition-delay:.1s;transition-delay:.1s}.nav__item:nth-child(3) .nav__item-text{-webkit-transition-delay:.1s;transition-delay:.1s}.nav__cb:checked~.nav__content .nav__item:nth-child(3) .nav__item-text{-webkit-transition-delay:.2s;transition-delay:.2s}.nav__item:nth-child(4) .nav__item-text{-webkit-transition-delay:0s;transition-delay:0s}.nav__cb:checked~.nav__content .nav__item:nth-child(4) .nav__item-text{-webkit-transition-delay:.3s;transition-delay:.3s}.nav__btn{position:absolute;right:0;top:0;width:90px;height:90px;padding:36px 31px;cursor:pointer}.nav__btn:before,.nav__btn:after{content:"";display:block;width:28px;height:4px;border-radius:2px;background:#096DD3;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:background-color .3s,-webkit-transform 1s cubic-bezier(0.48,.43,.29,1.3);transition:background-color .3s,-webkit-transform 1s cubic-bezier(0.48,.43,.29,1.3);transition:transform 1s cubic-bezier(0.48,.43,.29,1.3),background-color .3s;transition:transform 1s cubic-bezier(0.48,.43,.29,1.3),background-color .3s,-webkit-transform 1s cubic-bezier(0.48,.43,.29,1.3)}.nav__btn:before{margin-bottom:10px}.nav__btn:hover:before,.nav__btn:hover:after{background:#00bdea}.nav__cb:checked~.nav__btn:before{-webkit-transform:translateY(7px) rotate(-225deg);transform:translateY(7px) rotate(-225deg)}.nav__cb:checked~.nav__btn:after{-webkit-transform:translateY(-7px) rotate(225deg);transform:translateY(-7px) rotate(225deg)}
					a{
						text-decoration: none;
						color:inherit;
					}
				</style>
		</head>
		<body>
			<nav class="nav">
				<input type="checkbox" class="nav__cb" id="menu-cb">
				<div class="nav__content">
					<ul class="nav__items">
						<li class="nav__item"><span class="nav__item-text"><a href="http://v0n.gitee.io/de/">Demo</a></span></li>
						<li class="nav__item"><span class="nav__item-text"><a href="http://v0n.gitee.io/canvas/">Canvas</a></span></li>
						<li class="nav__item"><span class="nav__item-text">More...</span></li>
					</ul>

					<label class="nav__btn" for="menu-cb"></label>
				</div>
			</nav>
		</body>
	</html>