css悬浮折叠下拉层次按钮效果代码-html代码-BFW代码库

css悬浮折叠下拉层次按钮效果代码

代码语言：html

代码描述：css悬浮折叠下拉层次按钮效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
.fond {
	position:absolute;
	padding-top:85px;
	top:0;
	left:0;
	right:0;
	bottom:0
}
.contener {
	position:absolute;
	top:0;
	width:100%
}
.volet_4 {
	background-color:#880e4f
}
.volet_1,.volet_2,.volet_3,.volet_4 {
	position:absolute;
	height:200px;
	width:100%;
	top:-140px;
	box-shadow:1px 1px 16px #333;
	-webkit-transition:all .3s ease-in;
	-moz-transition:all .3s ease-in;
	-ms-transition:all .3s ease-in;
	transition:all .3s ease-in
}
.contener:hover .volet_1 {
	top:80px;
	background-color:#fff;
	-webkit-transform:scale(0.85);
	-moz-transform:scale(0.85);
	-ms-transform:scale(0.85);
	transform:scale(0.85)
}
.contener:hover .volet_2 {
	top:10px;
	background-color:#fff;
	-webkit-transform:scale(0.90);
	-moz-transform:scale(0.90);
	-ms-transform:scale(0.90);
	transform:scale(0.90)
}
.contener:hover .volet_3 {
	top:-60px;
	background-color:#fff;
	-webkit-transform:scale(0.95);
	-moz-transform:scale(0.95);
	-ms-transform:scale(0.95);
	transform:scale(0.95)
}
.menu_btn {
    width: 20px;
	cursor:pointer;
	margin-top:20px;
	padding-left:10px;
	padding-right:10px
}
.material_txt {
	line-height:60px;
	color:#fff;
	font-size:20px;
	font-weight:400;
	font-family:'Roboto';
	padding-left:10px
}
.material_txt_deploy {
	line-height:30px;
	color:#e91e63;
	font-size:30px;
	font-weight:400;
	font-family:'Roboto';
	padding-left:20px
}

    </style>
</head>

<body>

    <div class="fond">
        <div class="contener">
            <a href="#123">
                <div class="volet_1">
                    <div style="height:100%; position:relative;">
                        <div style="position:absolute;bottom:0px; height:60px; width:100%;">
                            <div class="material_txt_deploy">Contact</div>
                        </div>
                .........完整代码请登录后点击上方下载按钮下载查看