css实现右侧圆形点击扩散导航按钮菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现右侧圆形点击扩散导航按钮菜单效果代码
代码标签: css 右侧 圆形 点击 扩散 导航 按钮 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body {
height:100%;
}
body {
background:beige;
font-family:Alegreya Sans,sans-serif;
}
nav {
display:block;
position:fixed;
width:500px;
height:500px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-transform:translate3d(25px,-25px,0);
transform:translate3d(25px,-25px,0);
-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
transition:-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9),-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
}
nav.open {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
nav.top-right {
top:-140px;
right:-140px;
}
.disc {
position:absolute;
display:inline-block;
text-align:center;
cursor:pointer;
font:25px Alegreya Sans,sans-serif;
line-height:40px;
padding-top:10px;
border-radius:250px;
-webkit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0