jquery+css菜单悬浮弹出菜单效果代码-html代码-BFW代码库

jquery+css菜单悬浮弹出菜单效果代码

代码语言：html

代码描述：jquery+css菜单悬浮弹出菜单效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background-color:#3E3665;
	display:flex;
	align-items:center;
	justify-content:center
}
.fab {
	width:60px;
	height:60px;
	border-radius:50%;
	position:relative;
	background-color:#FFCF1E;
	cursor:pointer;
	transition:.3s cubic-bezier(0.41,-0.86,0.76,1.89)
}
.fab.open {
	width:40px;
	height:40px;
	transition:.3s cubic-bezier(0.41,-0.86,0.76,1.89)
}
.fab .option {
	width:6px;
	height:6px;
	overflow:hidden;
	background-color:#fff;
	border-radius:50%;
	position:absolute;
	top:calc(50% - 3px);
	transition:.3s cubic-bezier(0.41,-0.86,0.76,1.89);
	display:flex;
	align-items:center;
	justify-content:center
}
.fab .option.reply {
	left:calc((100% / 3) - 3px)
}
.fab .option.love {
	left:calc(50% - 3px)
}
.fab .option.delete {
	left:calc(((100% / 3) * 2) - 3px)
}
.fab .option i {
	font-size:20px;
	color:#fff;
	transform:scale(0);
	transition:.5s cubic-bezier(0.41,-2,0.76,2)
}
.fab .option.open {
	width:40px;
	height:40px;
	background-color:rgba(0,0,0,0.3)
}
.fab .option.open.reply {
	transform:translate(-60px,-50px)
}
.fab .option.open.love {
	transform:translate(-20px,-75px)
}
.fab .option.open.delete {
	transform:translate(25px,-50px)
}
.fab .option.open i {
	transform:scale(1);
	transition:.5s cubic-bezier(0.41,-2,0.76,2)
}
.fab .close {
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	dis.........完整代码请登录后点击上方下载按钮下载查看