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