一个按钮

发布: 2016-12-31 20:17:31标签: css
<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport'
    content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Document</title>
    <style>
        .hamburger {
            padding: 15px 15px;
            display: inline-block;
            cursor: pointer;
            transition-property: opacity, -webkit-filter;
            transition-property: opacity, filter;
            transition-property: opacity, filter, -webkit-filter;
            transition-duration: 0.15s;
            transition-timing-function: linear;
            font: inherit;
            color: inherit;
            text-transform: none;
            background-color: transparent;
            border: 0;
            margin: 0;
            overflow: visible; }
        .hamburger:hover {
            opacity: 0.7; }
        .hamburger-box {
            width: 30px;
            height: 24px;
            display: inline-block;
            position: relative; }
        .hamburger-inner {
            display: block;
            top: 50%;
            margin-top: -2px; }
        .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
            width: 30px;
            height: 4px;
            background-color: #000;
            border-radius: 4px;
            position: absolute;
            transition-property: -webkit-transform;
            transition-property: transform;
            transition-property: transform, -webkit-transform;
            transition-duration: 0.15s;
            transition-timing-function: ease; }
        .hamburger-inner::before, .hamburger-inner::after {
            content: '';
            display: block; }
        .hamburger-inner::before {
            top: -10px; }
        .hamburger-inner::after {
            bottom: -10px; }

        .hamburger--squeeze .hamburger-inner {
            transition-duration: 0.1s;
            transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
        .hamburger--squeeze .hamburger-inner::before {
            transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
        .hamburger--squeeze .hamburger-inner::after {
            transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
            transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
            transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

        .hamburger--squeeze.is-active .hamburger-inner {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            transition-delay: 0.14s;
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
        .hamburger--squeeze.is-active .hamburger-inner::before {
            top: 0;
            opacity: 0;
            transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
        .hamburger--squeeze.is-active .hamburger-inner::after {
            bottom: 0;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
            transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
            transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
            transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

    </style>
</head>
<body>
<div class='hamburger hamburger--squeeze'>
    <div class='hamburger-box'>
        <div class='hamburger-inner'></div>
    </div>
</div>
</body>
<script>
    document.getElementsByClassName('hamburger')[0].onclick = function () {
        this.classList.contains('is-active') ? this.classList.remove('is-active') : this.classList.add('is-active');
  }
</script>
</html>