div+css实现伸缩式弹出图标菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+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/all.5.6.1.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes like {
50% {
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@-moz-keyframes like {
50% {
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes like {
50% {
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@-webkit-keyframes aniafter {
0%, 100% {
opacity: 1;
border-radius: 0;
-moz-transform: translateX(60%);
-ms-transform: translateX(60%);
-webkit-transform: translateX(60%);
transform: translateX(60%);
}
}
@-moz-keyframes aniafter {
0%, 100% {
opacity: 1;
border-radius: 0;
-moz-transform: translateX(60%);
-ms-transform: translateX(60%);
-webkit-transform: translateX(60%);
transform: translateX(60%);
}
}
@keyframes aniafter {
0%, 100% {
opacity: 1;
border-radius: 0;
-moz-transform: translateX(60%);
-ms-transform: translateX(60%);
-webkit-transform: translateX(60%);
transform: translateX(60%);
}
}
body {
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
position: relative;
background: white;
color: #15153a;
flex-direction: column;
overflow-x: hidden;
min-height: 100%;
height: 100vh;
background-color: #c4dbf3;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-pack: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
-webkit-box-pack: center;
}
.box_title {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
.box_title .btn_item:before {
display: none;
}
.box_title .btn_item:after {
opacity: 0;
}
.btn {
position: relative;
display: flex;
justify-content: center;
overflow-y: hidden;
padding: 0 30px;
}
.con {
position: relative;
}
.con:before, ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0