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:.........完整代码请登录后点击上方下载按钮下载查看