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

代码语言：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;
        }
        @-webkit-keyframes appear-2 {
        	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(213px,-89px,0px) rotateZ(0deg);
        }
        100% {
        	-webkit-transform:translate3d(185px,-77px,0px);
        }
        }@-webkit-keyframes disappear-2 {
        	0% {
        	-webkit-transform:translate3d(185px,-77px,0px) rotateZ(0deg);
        	-webkit-animation-timing-function:cubic-bezier(1,0.6,0.57,0.75);
        }
        70% {
        	-webkit-transform:translate3d(213px,-89px,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(3) {
        	-webkit-animation-name:appear-3;
        	-webkit-animation-duration:240ms;
        	-webkit-animation-iteration-count:1;
        	-webkit-animation-fill-mode:forwards;
        	-webkit-animation-delay:60ms;
        }
        #menu:not(:checked) ~ .items li:nth-child(3) {
        	-webkit-animation-name:disappear-3;
        	-webkit-animation-duration:443.019ms;
        	-webkit-animation-iteration-count:1;
        	-webkit-animation-fill-mode:forwards;
        }
        @-webkit-keyframes appear-3 {
        	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:ranslate3d(183px,-140px,0px) rotateZ(0deg);
        }
        100% {
        	-webkit.........完整代码请登录后点击上方下载按钮下载查看