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