css实现悬浮扇形折叠菜单弹出效果代码-html代码-BFW代码库

css实现悬浮扇形折叠菜单弹出效果代码

代码语言：html

代码描述：css实现悬浮扇形折叠菜单弹出效果代码

下面为部分代码预览，完整代码请点击下载或在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-color:#EDEDED}.circular-menu{position:fixed;bottom:1em;right:1em}.circular-menu .floating-btn{display:block;width:3.5em;height:3.5em;border-radius:50%;background-color:hsl(4,98%,60%);box-shadow:0 2px 5px 0 hsla(0,0%,0%,.26);color:hsl(0,0%,100%);text-align:center;line-height:3.9;cursor:pointer;outline:0}.circular-menu.active .floating-btn{box-shadow:inset 0 0 3px hsla(0,0%,0%,.3)}.circular-menu .floating-btn:active{box-shadow:0 4px 8px 0 hsla(0,0%,0%,.4)}.circular-menu .floating-btn i{font-size:1.3em;transition:transform .2s}.circular-menu.active .floating-btn i{transform:rotate(-45deg)}.circular-menu:after{display:block;content:' ';width:3.5em;height:3.5em;border-radius:50%;position:absolute;top:0;right:0;z-index:-2;background-color:hsl(4,98%,60%);transition:all .3s ease}.circular-menu.active:after{transform:scale3d(5.5,5.5,1);transition-timing-function:cubic-bezier(.68,1.55,.265,1)}.circular-menu .items-wrapper{padding:0;margin:0}.circular-menu .menu-item{position:absolute;top:.2em;right:.2em;z-index:-1;display:block;text-decoration:none;color:hsl(0,0%,100%);font-size:1em;width:3em;height:3em;border-radius:50%;text-align:center;line-height:3;background-color:hsla(0,0%,0%,.1);transition:transform .3s ease,background .2s ease}.circular-menu .menu-item:hover{background-color:hsla(0,0%,0%,.3)}.circular-menu.active .menu-item{transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)}.circular-menu.active .menu-item:nth-child(1){transform:translate3d(1em,-7em,0)}.circular-menu.active .menu-item:nth-child(2){transform:translate3d(-3.5em,-6.3em,0)}.circular-menu.active .menu-item:nth-child(3){transform:translate3d(-6.5em,-3.2em,0)}.circular-menu.active .menu-item:nth-child(4){transform:translate3d(-7em,1em,0)}.circular-menu.circular-menu-left{right:auto;left:1em}.circular-menu.circular-menu-left .floating-btn{background-color:h.........完整代码请登录后点击上方下载按钮下载查看