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>
        @import 'https://fonts.googleapis.com/css?family=Raleway';
	* {
	outline:0;
	user-select:none
}
body,html {
	margin:0;
	background:#ddd;
	color:#7a7b7c
}
body {
	font-family:"Raleway","Microsoft JhengHei",Arial,sans-serif
}
.profile {
	width:330px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:5px;
	background-color:#fafafa;
	box-shadow:0 0 2rem #babbbc;
	animation:show-profile .5s forwards ease-in-out
}
@keyframes show-profile {
	0% {
	width:0
}
}.profile .photo,.profile .content {
	box-sizing:border-box
}
.profile .photo {
	width:100px;
	height:100px;
	border-radius:50%;
	overflow:hidden;
	border:5px solid #fafafa;
	background-color:#fafafa;
	margin-left:-50px;
	box-shadow:0 0 .5rem #babbbc;
	animation:rotate-photo .5s forwards ease-in-out
}
@keyframes rotate-photo {
	100% {
	transform:rotate(-360deg)
}
}.profile .photo img {
	width:100%
}
.profile .content {
	padding:10px;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0
}
.profile .content::before {
	content:"";
	position:absolute;
	width:230px;
	height:150px;
	background-color:#e9f3e6;
	left:0;
	top:-20px;
	z-index:-1;
	transform:rotate(-8deg)
}
.profile .content .text {
	margin-top:20px;
	margin-left:50px
}
.profile .content .text h3,.profile .content .text h6 {
	font-weight:normal;
	margin:3px 0;
	letter-spacing:.5px;
	white-space:nowrap
}
.profile .content .btn {
	background-color:#abc;
	width:50px;
	height:50px;
	position:absolute;
	right:25px;
	top:25px;
	border-radius:50%;
	z-index:1;
	cursor:pointer;
	transition-duration:.3s;
	animation:pop-btn .3s both ease-in-out .5s
}
@keyframes pop-btn {
	0% {
	transform:scale(0)
}
80% {
	transform:scale(1.2)
}
100% {
	transform:scale(1)
}
}.profile .content .btn:hover {
	box-shadow:0 0 0 5px rgba(170,187,204,0.5)
}
.profile .content .btn span {
	width:60%;
	height:2px;
	position:absolute;
	background-color:white;
	top:50%;
	left:20%;
	transform:translateY(-50%);
	animation:to-hamburger .3s forwards ease-in-out
}
.profile .content .btn span::before,.profile .content .btn span::after {
	content:"";
	width:100%;
	height:2px;
	position:absolute;
	background-color:white;
	transition-duration:.3s;
	transform:rotate(0deg);
	right:0
}
.profile .content .btn span::before {
	margin-top:-7px
}
.profile .content .btn span::after {
	margin-top:7px
}
.profile .content .btn.active span {
	animation:to-arrow .3s forwards ease-in-out
}
.profile .content .btn.active span::before,.profile .content .btn.active span::after {
	width:60%;
	right:-1px
}
.profile .content .btn.active span::before {
	transform:rotate.........完整代码请登录后点击上方下载按钮下载查看