css+svg实现悬浮按钮展示融合菜单弹出效果代码-html代码-BFW代码库

css+svg实现悬浮按钮展示融合菜单弹出效果代码

代码语言：html

代码描述：css+svg实现悬浮按钮展示融合菜单弹出效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
        background:#FFF;
        color:#585858;
        font-family:"Exo 2",sans-serif;
        text-align:center;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
}
a {
        color:inherit
}
h1 {
        font-weight:300;
        padding-top:20px;
        margin:20px 0
}
.inspiration {
        position:absolute;
        bottom:10px;
        right:10px;
        font-style:oblique
}
.item-menu {
        padding-top:20px;
        height:250px;
        box-sizing:border-box;
        font-size:20px;
        text-align:center;
        filter:url("#shadowed-goo")
}
.item-menu .real-menu {
        transform:translate3d(0,-65px,0);
        transition:transform ease-out 200ms
}
.item-menu .menu-item {
        background:#12CC66;
        border-radius:100%;
        width:80px;
        height:80px;
        color:white;
        text-align:center;
        line-height:80px;
        transition:transform ease-out 200ms;
        display:inline-block;
        position:relative
}
.item-menu .menu-open-button {
        background:#12CC66;
        border-radius:100%;
        width:80px;
        height:80px;
        color:white;
        text-align:center;
        line-height:80px;
        transition:transform ease-out 200ms;
        display:inline-block;
        position:relative;
        width:40px;
        height:40px
}
.item-menu .menu-open {
        display:none
}
.item-menu .plus {
        width:18px;
        height:2px;
        background:white;
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-9px;
        margin-top:-1px;
        transition:transform 200ms
}
.item-menu .plus.plus-1 {
        transform:rotate(90deg) translate3d(0,0,0)
}
.item-menu .plus.plus-2 {
        transform:rotate(0) translate3d(0,0,0)
}
.item-menu .menu-item:hover {
        background:white;
        color:#12CC66
}
.item-menu .menu-item:nth-child(1) {
        transition-duration:70ms;
        transform:translate3d(171px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(2) {
        transition-duration:130ms;
        transform:translate3d(85.5px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(3) {
        transition-duration:190ms;
        transform:translate3d(0,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(4) {
        transition-duration:130ms;
        transform:translate3d(-85.5px,0,0) scale(0.5)
}
.item-menu .menu-item:nth-child(5) {
        transition-duration:70ms.........完整代码请登录后点击上方下载按钮下载查看