菜单悬浮播放动画效果代码
代码语言: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