jquery+css实现图标子菜单点击伸缩弹出效果代码-html代码-BFW代码库

jquery+css实现图标子菜单点击伸缩弹出效果代码

代码语言：html

代码描述：jquery+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>
html,body,.container {
        width:100%;
        height:100%;
        margin:0;
        overflow:hidden
}
.container {
        background:#2F2F31
}
#navMenu {
        top:150px;
        left:200px;
        width:140px;
        height:140px;
        z-index:100;
        background:linear-gradient(90deg,#910EC9,#d350db,#910EC9);
        -webkit-background:linear-gradient(90deg,#910EC9,#d350db,#910EC9);
        background-size:400% 400%;
        -webkit-background-size:400% 400%;
        animation:gradient 5s infinite;
        -webkit-animation:gradient 5s infinite
}
#navMenu:hover,.nav:hover {
        background:#d350db
}
@keyframes gradient {
        50% {
        background-position:100% 0
}
}@-webkit-keyframes gradient {
        50% {
        background-position:100% 0
}
}.diamond {
        position:absolute;
        width:67.5px;
        height:67.5px;
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        background:#910EC9;
        margin:10px;
        cursor:pointer;
        box-shadow:1px 4px 10px #101010
}
.diamond:active {
        background:#710b9e;
        box-shadow:0 1px 2.5px #101010;
        transition:.1s;
        -webkit-transition:.1s
}
.nav {
        transition:.5s;
        -webkit-transition:.5s
}
.nav1 {
        top:86px;
        left:287px
}
.nav2 {
        top:136px;
        left:337px
}
.nav3 {
        top:186px;
        left:387px.........完整代码请登录后点击上方下载按钮下载查看