css实现用户头像右侧悬浮按钮点击弹出环形子菜单动画效果代码-html代码-BFW代码库

css实现用户头像右侧悬浮按钮点击弹出环形子菜单动画效果代码

代码语言：html

代码描述：css实现用户头像右侧悬浮按钮点击弹出环形子菜单动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    * {
        box-sizing:border-box;
        user-select:none
}
html {
        height:100%
}
body {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        height:100%;
        padding:0;
        margin:0;
        background-color:rgba(225,225,225,0.67)
}
.material-icons {
        color:#fff;
        font-size:34px
}
.button-inside .material-icons {
        font-size:16px
}
.main-wrapper {
        width:200px;
        height:200px;
        position:relative;
        border-radius:50%;
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -webkit-justify-content:center;
        -ms-flex-pack:center;
        justify-content:center;
        box-shadow:0 4px 8px rgba(0,0,0,0.2)
}
.main-wrapper-inside {
        width:200px;
        height:200px;
        position:relative
}
.button {
        border-radius:50%;
        width:58px;
        height:58px;
        background-color:#F59F00;
        position:absolute;
        bottom:0;
        right:0;
        z-index:6;
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items:center;
        -webkit-box-pack:center;
        -webkit-justify-content:center;
        -ms-flex-pack:center;
        justify-content:center;
        cursor:pointer;
        -webkit-transition:all 500ms cubic-bezier(0.19,1,0.22,1);
        transition:all 500ms cubic-bezier(0.19,1,0.22,1);
        box-shadow:-1px 2px 12px rgba(0,0,0,0.4);
        will-change:transform
}
.button .material-icons {
        -webkit-tr.........完整代码请登录后点击上方下载按钮下载查看