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

代码语言:html

所属分类:菜单导航

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

代码标签: 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:#1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0