CSS实现按钮开门效果

2018-02-27 11:07:20来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

按钮开门效果

 

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <style>    body {        height: 100%;        padding: 0 24px;        margin: 0;        color: #515151;        background-color: #FFF9F2;        overflow: hidden;    }    main {        position: absolute;        top: 50%;        left: 50%;        -webkit-transform: translate(-50%, -50%);        transform: translate(-50%, -50%);        margin: 63px auto;        -webkit-transition: -webkit-transform 0.8s 0.61s ease-out;        transition: -webkit-transform 0.8s 0.61s ease-out;        transition: transform 0.8s 0.61s ease-out;        transition: transform 0.8s 0.61s ease-out, -webkit-transform 0.8s 0.61s ease-out;    }    .hexagon {        position: relative;        width: 80px;        height: 46.19px;        margin: auto;        background-color: #00B4FF;        -webkit-transform: translateZ(0);        transform: translateZ(0);        z-index: 2;    }    .hexagon:before, .hexagon:after {        content: "";        position: absolute;        width: 0;        border-left: 40px solid transparent;        border-right: 40px solid transparent;    }    .hexagon:before {        bottom: 100%;        border-bottom: 23.09px solid #00B4FF;    }    .hexagon:after {        top: 100%;        width: 0;        border-top: 23.09px solid #00B4FF;    }    .circle {        position: absolute;        bottom: -12px;        right: -12px;        margin: auto;        width: 24px;        height: 24px;        background-color: #515151;        border-radius: 100%;        z-index: 3;        box-shadow: #FFF9F2 0 0 0 4px;    }    h1 {        opacity: 0;        position: relative;        font-family: "Fredoka One", sans-serif;        font-size: 36px;        text-align: center;        margin: 30px 0 60px;        -webkit-transform: translateY(24px);        transform: translateY(24px);        -webkit-transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;        transition: opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;        transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out;        transition: transform 0s 1.42s ease-out, opacity 0s 1.42s ease-out, -webkit-transform 0s 1.42s ease-out;        z-index: 1;    }    h1 span {        color: #00B4FF;    }    .open h1 {        opacity: 1;        -webkit-transform: translateY(0);        transform: translateY(0);        -webkit-transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;        transition: opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;        transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out;        transition: transform 0.4s 0.5s ease-out, opacity 0.6s 0.5s ease-out, -webkit-transform 0.4s 0.5s ease-out;    }    .panel {        position: fixed;        width: 50%;        height: 100%;        background-color: #00B4FF;        z-index: 6;        visibility: visible;        -webkit-transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;        transition: opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;        transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out;        transition: transform 0.6s ease-in-out, opacity 0.8s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;    }    .panel.left {        left: 0;    }    .panel.left:before {        position: absolute;        top: 0;        right: 0;        bottom: 0;        margin: auto;        content: '';        border-right: 40px solid #FFF9F2;        border-top: 23px solid transparent;        border-bottom: 23px solid transparent;        height: 46px;        width: 0;    }    .panel.right {        right: 0;    }    .panel.right:before {        position: absolute;        top: 0;        left: 0;        bottom: 0;        margin: auto;        content: '';        border-left: 40px solid #FFF9F2;        border-top: 23px solid transparent;        border-bottom: 23px solid transparent;        height: 46px;        width: 0;    }    .panel.right:after {        content: '';        position: absolute;        top: 0;        bottom: -46px;        left: 28px;        margin: auto;        width: 24px;        height: 24px;        background-color: #FFF9F2;        border-radius: 100%;        z-index: 3;        box-shadow: #00B4FF 0 0 0 4px;    }    .open .panel {        opacity: 0.2;        -webkit-transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;        transition: opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;        transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out;        transition: transform 0.6s ease-in-out, opacity 0s 0.61s ease-out, -webkit-transform 0.6s ease-in-out;    }    .open .panel.left {        -webkit-transform: translate3d(-100%, 0, 0);        transform: translate3d(-100%, 0, 0);    }    .open .panel.right {        -webkit-transform: translate3d(100%, 0, 0);        transform: translate3d(100%, 0, 0);    }    button {        cursor: pointer;        position: absolute;        top: 0;        right: 0;        bottom: 0;        left: 0;        margin: auto;        width: 80px;        height: 80px;        color: white;        background-color: transparent;        padding: 0 24px;        font-size: 18px;        border: 0;        z-index: 6;        border-radius: 100%;        -webkit-tap-highlight-color: transparent;    }    button:focus {        outline: none;    }    </style></head><body ><!-- HTML代码片段中请勿添加<body>标签 //--><div ></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script><main>    <div >        <div ></div>    </div>    <h1>开门<span>效果</span></h1></main><div ></div><div ></div><button></button><script type="text/javascript">    $('button').on('click', function () {        $('body').toggleClass('open');    });</script></body></html>

 

 

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台