菜单悬浮播放动画效果代码
代码语言:html
所属分类:悬停
代码描述:菜单悬浮播放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/* * * * * * * * * * * * * * * *
* * * * * main styles * * * * *
* * * * * * * * * * * * * * * */
html {height:100%; width:100%;}
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#899B2C;
background-image:-webkit-radial-gradient(cover, #A4B457, #74880A);
background-image: -moz-radial-gradient(cover, #A4B457, #74880A);
background-image: -ms-radial-gradient(cover, #A4B457, #74880A);
background-image: -o-radial-gradient(cover, #A4B457, #74880A);
background-image: radial-gradient(cover, #A4B457, #74880A);
-webkit-backface-visibility: hidden;
}
nav {
position:absolute;
top:50%; left:50%;
margin-top:-50px;
margin-left:-200px;
overflow:hidden;
width:400px;
height:100px;
}
nav a {
display:block;
float:left;
text-decoration:none;
text-align:center;
}
nav a:nth-child(2) {
margin:0 50px 0 50px;
}
nav a figure {
display:block;
position:relative;
width:100px; height:100px;
margin:0;
}
/* * * * * * * * * * * * *
* * * * * about * * * * *
* * * * * * * * * * * * */
#about figure div {
position:absolute;
bottom:0; left:0; right:0;
-webkit-transition:bottom 0.2s ease;
-moz-transition:bottom 0.2s ease;
-ms-transition:bottom 0.2s ease;
-o-transition:bottom 0.2s ease;
transition:bottom 0.2s ease;
}
#about figure div:nth-child(1) {bottom:30px;}
#about figure div:nth-child(2) {bottom:15px;}
#about figure div:nth-child(3) {bottom:0;}
#about figure div span {
position:absolute;
bottom:0;
height:8px;
background:#333;
border-radius:4px;
-webkit-transition:-webkit-transform 0.3s 0.1s ease-in-out;
-moz-transition: -moz-transform 0.3s 0.1s ease-in-out;
-ms-transition: -ms-transform 0.3s 0.1s ease-in-out;
-o-transition: -o-transform 0.3s 0.1s ease-in-out;
transition: transform 0.3s 0.1s ease-in-out;
}
#about figure div span:nth-child(1) {
right:36px; width:64px;
-webkit-transform:rotate(18deg);
-moz-transform:rotate(18deg);
-ms-transform:rotate(18deg);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0