css实现右上角按钮点击弹出圆环形子菜单效果代码-html代码-BFW代码库

css实现右上角按钮点击弹出圆环形子菜单效果代码

代码语言：html

代码描述：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-transform:scale3d(0.5,0.5,0.5) rotate3d(0,0,1,190deg);
        transform:scale3d(0.5,0.5,0.5) rotate3d(0,0,1,190deg);
        pointer-events:none;
        opacity:0;
        cursor:pointer;
        -webkit-transition:opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
        transition:opacity 0.5s,-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),opacity 0.5s;
        transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9),opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
}
.disc div {
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
}
.open .disc {
        pointer-events:auto;
        opacity:1;
}
.l1 {
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background:tomato;
        -webkit-transition-delay:0s;
        transition-delay:0s;
}
.open .l1 {
        -webkit-transition-delay:0s;
        transition-delay:0s;
        -webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
        transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
        opacity:1;
}
.open .l1:hover {
        background:#1a0a07;
        color:tomato;
        -webkit-transition-delay:0s;
        transition-delay:0s;
}
.open .l1:active {
        background:#803224;
        color:tom.........完整代码请登录后点击上方下载按钮下载查看