html5掉落效果,HTML5 菜单掉落动效
CSS
語言：
CSSSCSS
確定
/* Getting dressed */
body {
background: rgba(237, 237, 235, 0.7) url('http://build.digitalcraft.co/digitalcraft.png') 95% 20px no-repeat;
background-size: 163px;
font: 14px/21px Monaco, sans-serif;
color: #999;
font-smoothing: antialiased;
text-size-adjust: 100%;
height: 100%;
}
a,
a:visited {
text-decoration: none;
color: #ff805f;
}
h4 {
margin: 0;
color: #333;
/* It's Party Time! */
}
header {
width: 320px;
height: 50px;
position: relative;
top: 60px;
left: 50%;
transform: translateX(-50%);
background: #000;
box-shadow: 0 0 10px #000;
overflow: hidden;
backface-visibility: hidden;
transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
transition-delay: 400ms;
/*let your hair down and show the goods*/
}
header.shownav {
width: 320px;
height: 360px;
}
nav {
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
}
.dc-menu-trigger {
position: absolute;
top: 0px;
left: 11px;
display: block;
width: 28px;
height: 50px;
cursor: pointer;
z-index: 30;
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
transition-delay: 600ms;
}
.dc-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 3px;
margin-top: -2px;
background-color: #fff;
font-size: 0px;
user-select: none;
transition: background-color 0.5s;
}
.dc-menu-open .dc-menu-trigger span {
background-color: transparent;
}
.dc-menu-open .dc-menu-trigger {
left: 88%;
transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
}
.dc-menu-trigger span:before,
.dc-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #fff;
content: '';
transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
}
.dc-menu-trigger span:before {
transform: translateY(-250%);
}
.dc-menu-trigger span:after {
transform: translateY(250%);
/*Just bust a move*/
}
.dc-menu-open .dc-menu-trigger span:before {
transform: translateY(0) rotate(45deg);
}
.dc-menu-open .dc-menu-trigger span:after {
transform: translateY(0) rotate(-45deg);
}
.dc-menu-close .dc-menu-trigger:before {
animation: plusVertical 0.3s ease forwards;
}
.dc-menu-close .dc-menu-trigger:after {
animation: plusHorizontal 0.3s ease forwards;
}
.menu-overlay {
z-index: 10;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background: none;
}
.menu-overlay.open {
background: #000;
height: 100%;
}
.menu-overlay ul {
position: absolute;
visibility: hidden;
list-style-type: none;
top: -40%;
left: 0;
width: 100%;
padding: 0;
opacity: 0;
display: table-cell;
vertical-align: middle;
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
}
.menu-overlay ul li {
text-align: center;
font-size: 1rem;
font-weight: 100;
margin: 30px 0;
text-transform: uppercase;
letter-spacing: 5px;
}
.menu-overlay ul li:after {
content: "";
display: block;
width: 30px;
height: 1px;
background: #333;
margin: 10px auto 0 auto;
}
.menu-overlay ul li:hover {
color: #eee;
cursor: pointer;
}
.menu-overlay.open ul {
top: 40px;
left: 0;
visibility: visible;
opacity: 1;
margin-top: 0;
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
transition-delay: 400ms;
}
總結
以上是生活随笔為你收集整理的html5掉落效果,HTML5 菜单掉落动效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 获取设备串号,Andro
- 下一篇： django html直接调用的方法,如