CSS3 前端开发插件_弹性动画菜单DEMO演示

css3 前端开发插件|web前端开发

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>css3 前端开发插件:弹性动画菜单DEMO演示</title>
<style type=”text/css” media=”all”>
*,
*:before,
*:after{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
height:100%;
}
body:before,
body:after{
content:””;
display:block;
height:50%;
background:#00bdea;
}
body:after{
background:#208FF9;
}
/* MAIN VARIABLES FOR CUSTOMIZATION */
/* ——————————– */
.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:010px35pxrgba(0,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 1scubic-bezier(0.49,-0.3,0.68,1.23);
transition: width 1scubic-bezier(0.49,-0.3,0.68,1.23);
}
.nav__cb:checked~.nav__content{
-webkit-transition: width 1scubic-bezier(0.48,0.43,0.29,1.3);
transition: width 1scubic-bezier(0.48,0.43,0.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;
width:70px;
text-align:center;
color:#6C7784;
font-size:14px;
line-height:90px;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
-webkit-perspective:1000px;
perspective:1000px;
-webkit-transition:color0.3s;
transition:color0.3s;
cursor:pointer;
}
.nav__item:hover{
color:#00bdea;
}
.nav__item-text{
display:block;
height:100%;
-webkit-transform:rotateY(-70deg);
transform:rotateY(-70deg);
opacity:0;
-webkit-transition: opacity 0.7s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
transition: opacity 0.7s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
transition: transform 0.7scubic-bezier(0.48,0.43,0.7,2.5), opacity 0.7s;
transition: transform 0.7scubic-bezier(0.48,0.43,0.7,2.5), opacity 0.7s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
}
.nav__cb:checked~.nav__content.nav__item-text{
-webkit-transform:rotateY(0);
transform:rotateY(0);
opacity:1;
-webkit-transition: opacity 0.2s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
transition: opacity 0.2s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
transition: transform 0.7scubic-bezier(0.48,0.43,0.7,2.5), opacity 0.2s;
transition: transform 0.7scubic-bezier(0.48,0.43,0.7,2.5), opacity 0.2s,-webkit-transform0.7scubic-bezier(0.48,0.43,0.7,2.5);
}
.nav__item:nth-child(1).nav__item-text{
-webkit-transition-delay:0.3s;
transition-delay:0.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:0.2s;
transition-delay:0.2s;
}
.nav__cb:checked~.nav__content.nav__item:nth-child(2).nav__item-text{
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav__item:nth-child(3).nav__item-text{
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav__cb:checked~.nav__content.nav__item:nth-child(3).nav__item-text{
-webkit-transition-delay:0.2s;
transition-delay:0.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:0.3s;
transition-delay:0.3s;
}
.nav__btn{
position:absolute;
right:0;
top:0;
width:90px;
height:90px;
padding:36px31px;
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 0.3s,-webkit-transform1scubic-bezier(0.48,0.43,0.29,1.3);
transition: background-color 0.3s,-webkit-transform1scubic-bezier(0.48,0.43,0.29,1.3);
transition: transform 1scubic-bezier(0.48,0.43,0.29,1.3), background-color 0.3s;
transition: transform 1scubic-bezier(0.48,0.43,0.29,1.3), background-color 0.3s,-webkit-transform1scubic-bezier(0.48,0.43,0.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);
}
</style>
</head>
<body>
<navclass=”nav”>
<inputtype=”checkbox” class=”nav__cb” id=”menu-cb”>
<divclass=”nav__content”>
<ulclass=”nav__items”>
<liclass=”nav__item”>
<spanclass=”nav__item-text”> Home </span>
</li>
<liclass=”nav__item”>
<spanclass=”nav__item-text”> Works </span>
</li>
<liclass=”nav__item”>
<spanclass=”nav__item-text”> About </span>
</li>
<liclass=”nav__item”>
<spanclass=”nav__item-text”> Contact </span>
</li>
</ul>
</div>
<labelclass=”nav__btn” for=”menu-cb”></label>
</nav>
</body>
</html>
css3 前端开发插件|前端开发者
» 本文来自:前端开发者 » 《CSS3 前端开发插件_弹性动画菜单DEMO演示》
» 本文链接地址:https://www.rokub.com/3294.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!