css实现左侧悬浮按钮点击弹射子菜单图标动画效果代码-html代码-BFW代码库

css实现左侧悬浮按钮点击弹射子菜单图标动画效果代码

代码语言：html

代码描述：css实现左侧悬浮按钮点击弹射子菜单图标动画效果代码

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

<!Doctype html>

<head>
    <meta charset="utf-8" />
    <style>
        * {
                margin:0;
                padding:0;
        }
        ul {
                list-style:none
        }
        .container {
                position:absolute;
                bottom:10px;
                left:10px;
                width:50px;
                height:50px;
                box-shadow:0 0 10px rgba(0,0,0,0.7);
                border-radius:25px;
        }
        .circle {
                width:40px;
                height:40px;
                position:absolute;
                top:5px;
                left:5px;
                text-align:center;
                font-size:30px;
                line-height:40px;
                color:#fff;
                cursor:pointer;
                border-radius:20px;
                background-image:-webkit-linear-gradient(#E85738,#CB2C16);
                -webkit-transform:rotate(45deg);
                -webkit-transform-style:preserve-3d;
                -webkit-transition:all 0.2s linear;
        }
        .circle:active:before {
                content:"";
                display:block;
                position:absolute;
                top:0;
                left:0;
                bottom:0;
                right:0;
                background:rgba(0,0,0,0.3);
                pointer-events:none;
                -webkit-border-radius:20px;
        }
        .items li {
                position:fixed;
                bottom:20px;
                left:20px;
                z-index:-1;
                display:block;
                height:26px;
                width:26px;
                color:white;
                text-align:center;
                line-height:26px;
                font-size:18px;
                background-image:-webkit-linear-gradient(#433f3c,#44403d);
                -webkit-box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(0,0,0,0.3),inset 0 0 0 1px black,0 0 0 5px rgba(0,0,0,0.3);
                -webkit-border-radius:13px;
                -webkit-transform-style:preserve-3d;
        }
        #menu:checked ~ .items li:nth-child(1) {
                -webkit-animation-name:appear-1;
                -webkit-animation-duration:240ms;
                -webkit-animation-iteration-count:1;
                -webkit-animation-fill-mode:forwards;
                -webkit-animation-delay:20ms;
        }
        #menu:not(:checked) ~ .items li:nth-child(1) {
                -webkit-animation-name:disappear-1;
                -webkit-animation-duration:387.5ms;
                -webkit-animation-iteration-count:1;
                -webkit-animation-fill-mode:forwards;
        }
        @-webkit-keyframes appear-1 {
                0% {
                -webkit-transform:translate3d(0,0,0px) rotateZ(270deg);
                -webkit-animation-timing-function:cubic-bezier(1,0.6,0.57,0.75);
        }
        80% {
                -webkit-animation-timing-function:cubic-bezier(0.45,0.97,0.51,0.78);
                -webkit-transform:translate3d(228px,-30px,0px) rotateZ(0deg);
        }
        100% {
                -webkit-transform:translate3d(198px,-26px,0px);
        }
        }@-webkit-keyframes disappear-1 {
                0% {
                -webkit-transform:translate3d(198px,-26px,0px) rotateZ(0deg);
                -webkit-animation-timing-function:cubic-bezier(1,0.6,0.57,0.75);
        }
        70% {
                -webkit-transform:translate3d(228px,-30px,0px) rotateZ(360deg);
                -webkit-animation-timing-function:cubic-bezier(0.45,0.97,0.51,0.78);
        }
        100% {
                -webkit-transform:translate3d(0,0,0px) rotateZ(540deg);
        }
        }#menu:checked ~ .items li:nth-child(2) {
                -webkit-animation-name:appear-2;
                -webkit-animation-duration:240ms;
                -webkit-animation-iteration-count:1;
                -webkit-animation-fill-mode:forwards;
                -webkit-animation-delay:40ms;
        }
        #menu:not(:checked) ~ .items li:nth-child(2) {
                -webkit-animation-name:disappear-2;
                -webkit-animation-duration:411.125ms;
                -webkit-animation-iteration-count:1;
                -webkit-animation-fill-mode:forwards;
.........完整代码请登录后点击上方下载按钮下载查看