css实现用户头像右侧悬浮按钮点击弹出环形子菜单动画效果代码-html代码-BFW代码库

css实现用户头像右侧悬浮按钮点击弹出环形子菜单动画效果代码

代码语言：html

代码描述：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>
    * {
	box-sizing:border-box;
	user-select:none
}
html {
	height:100%
}
body {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	height:100%;
	padding:0;
	margin:0;
	background-color:rgba(225,225,225,0.67)
}
.material-icons {
	color:#fff;
	font-size:34px
}
.button-inside .material-icons {
	font-size:16px
}
.main-wrapper {
	width:200px;
	height:200px;
	position:relative;
	border-radius:50%;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	box-shadow:0 4px 8px rgba(0,0,0,0.2)
}
.main-wrapper-inside {
	width:200px;
	height:200px;
	position:relative
}
.button {
	border-radius:50%;
	width:58px;
	height:58px;
	background-color:#F59F00;
	position:absolute;
	bottom:0;
	right:0;
	z-index:6;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	cursor:pointer;
	-webkit-transition:all 500ms cubic-bezier(0.19,1,0.22,1);
	transition:all 500ms cubic-bezier(0.19,1,0.22,1);
	box-shadow:-1px 2px 12px rgba(0,0,0,0.4);
	will-change:transform
}
.button .material-icons {
	-webkit-transition:transform 200ms cubic-bezier(0.19,1,0.22,1);
	transition:transform 200ms cubic-bezier(0.19,1,0.22,1);
	will-change:transform;
	transform-origin:center center
}
.button.animation {
	background-color:#C47F00
}
.button.animation .material-icons {
	-webkit-transform:rotate(-45deg) translateZ(0);
	transform:rotate(-45deg) translateZ(0)
}
.button-wrapper {
	width:200px;
	height:200px;
	position:absolute;
	border-radius:50%;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-transition:transform 400ms cubic-bezier(0.07,1.1,0.28,1.01);
	transition:transform 400ms cubic-bezier(0.07,1.1,0.28,1.01);
	will-change:transform
}
.button-wrapper.animation {
	-webkit-transition:tr.........完整代码请登录后点击上方下载按钮下载查看