CSS Neumorphic Toggle

Adam Kuhn shares a ghostly rocker toggle powered by SCSS and neumorphic aesthetics.

See the Pen CSS Neumorphic Toggle by Adam Kuhn (@cobra_winfrey) on CodePen.

Created on February 15, 2020 Updated on March 23, 2020. A Pen by Adam Kuhn on CodePen. License.

Download

index.html

<div id="wrap">
<input type="radio" name="radio">
  <label data-text="Option 1">Option 1</label>
<input type="radio" name="radio">
  <label data-text="Option 2">Option 2</label>
  <div class="sphere"></div>
  <div class="platform">
  <div class="hole"></div>
  <div class="hole"></div>
  </div>
</div>
$duration:0.75s;
body{
  display:grid;
  place-items:center;
  height:100vh;
  width:100vw;
  overflow:hidden;
  background:linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.95)), linear-gradient(to bottom, #0070ff,#415fff);
  &:before, &:after{
    content:'';
    position:absolute;
    width:220px;
    height:150px;
    left:calc(50% - 2.5px);
    top:50%;
    transform:translate(-50%, -50%);
    background:#fff;
    pointer-events:none;
    box-shadow:0 0 0 1px rgba(255,255,255,0.85), 0 20px 40px 10px rgba(255,255,255,0.85),  0 0 0 0.75px #415fff, 0 10px 40px -20px #0070ff, 0 20px 40px -20px #415fff;
  }
  &:after{
    box-shadow:none;
    background: linear-gradient(to bottom, #0070ff,#415fff);
    mix-blend-mode:soft-light;
    box-shadow:none;
    z-index:9;
  }
  #wrap{
    position:relative;
    width:50px;
    height:150px;
    transform-style:preserve-3d;
    perspective:400px;
    transform:translateX(-75px);
    &:before, &:after{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      background:lighten(#efefef, 1%);
      left:calc(100% + 12.5px);
      transform-origin:left;
      transform:rotateY(90deg);
    }
    &:after{
      left:calc(-100% - 12.5px);
      transform-origin:right;
      transform:rotateY(-90deg);
    }
    *{
      transform-style:preserve-3d;
      &:before, &:after{
        transform-style:preserve-3d;
      }
    }
    label{
      z-index:9;
      position:absolute;
      left:75px;
      font-family:'Oswald';
      text-transform:uppercase;
      width:200px;
      font-size:32px;
      height:50%;
      display:flex;
      align-items:center;
      top:0;
      color:#fff;
      text-shadow:0 -1px 2px #fff;
      transform:translateY(-2px) translateZ(-15px);
      &:before{
        content:attr(data-text);
        position:absolute;
        color:rgba(0,0,0,0.25);
        z-index:-1;
        top:50%;
        transform:translateY(calc(-50% + 2px));
        left:0;
        filter:blur(2px);
      }
      &:nth-of-type(2){
        top:50%;
      }
    }
    input{
      position:absolute;
      width:100%;
      height:50%;
      left:0;
      opacity:0;
      z-index:999;
      cursor:pointer;
      &:first-of-type{
        top:0;
        &:checked{
          ~ .sphere{
            animation:sphere1 $duration ease-in-out 1 forwards, sphere3 $duration ease-in-out 1 forwards;
            @keyframes sphere1{
              0%{
                box-shadow:inset 0px 2px 5px -2.5px rgba(0,0,0,0.3), 0 0 5px 0 rgba(0,0,0,0);
              }
              25%{
                box-shadow:inset 0px 3px 5px -2.5px rgba(0,0,0,0.3), 0 0px 5px 0px rgba(0,0,0,0);
              }
              62.5%{
                box-shadow:inset 0px 0px 5px -2.5px rgba(0,0,0,0.3), 0 10px 10px 0px rgba(0,0,0,0.1);
              }
              75%{
                box-shadow:inset -1px -1px 5px -2.5px rgba(0,0,0,0.3), 0 10px 10px -5px rgba(0,0,0,0.1);
              }
              100%{
                box-shadow:inset -1px -3px 5px -2.5px rgba(0,0,0,0.3), 0 0 5px 0 rgba(0,0,0,0);
              }
            }
            @keyframes sphere3{
              0%{
                background-position:50% 5px, center;
              }
              100%{
                background-position:50% 0px, center;
              }
            }
          }
          ~ .platform{
            animation:check1 $duration ease-in-out 1 forwards;
            &:after{
              height:40px;
              transform: translateY(10px) translateZ(40px) rotateX(80deg);
              background:linear-gradient(to top, rgba(0,0,0,0.025), #efefef);
              box-shadow:0 0 5px -3px #efefef;
            }
            @keyframes check1{
              0%{
                transform:rotateX(0deg);
                box-shadow:inset 0 -5px 5px -10px rgba(0,0,0,0.0);
              }
              50%{
                transform:rotateX(40deg);
                box-shadow:inset 0 80px 35px -10px rgba(0,0,0,0.035);
              }
              100%{
                transform:rotateX(0deg);
                box-shadow:inset 0 -5px 5px -10px rgba(0,0,0,0.0);
              }
            }
            .hole{
              animation:hole1 $duration ease-in-out 1 forwards;
              @keyframes hole1{
                  0%{
                    box-shadow:0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
                  }
                  50%{
                    box-shadow:0 0 0 2px #fff, 0 2px 3px 3px #efefef, inset 0 20px 4px 3px #ddd;
                  }
                  100%{
                    box-shadow:0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
                  }
                }
            }
          }
        }
      }
      &:last-of-type{
        bottom:0;
        &:checked{
          ~ .sphere{
            transform:translateZ(90px) translateX(-50%) translateY(55px);
            animation:sphere2 $duration ease-in-out 1 forwards, sphere4 $duration ease-in-out 1 forwards;
            &:before{
              transform:translateY(-20px) translateZ(-5px) scale(1) scaleY(1);
              background:rgba(0,0,0,0.1);
            }
            @keyframes sphere2{
              0%{
                box-shadow:inset -1px -3px 5px -2.5px rgba(0,0,0,0.3), 0 0 5px 0 rgba(0,0,0,0);
              }
              25%{
                box-shadow:inset -1px -3px 8px -2.5px rgba(0,0,0,0.3), 0 0px 5px 0px rgba(0,0,0,0);
              }
              62.5%{
                box-shadow:inset 0px 0px 10px -4px rgba(0,0,0,0.3), 0 -10px 10px 0px rgba(0,0,0,0.1);
              }
              75%{
                box-shadow:inset 0px 2px 8px -4px rgba(0,0,0,0.3), 0 -10px 10px -5px rgba(0,0,0,0.1);
              }
              100%{
                box-shadow:inset 0px 2px 5px -2.5px rgba(0,0,0,0.3), 0 0 5px 0 rgba(0,0,0,0);
              }
            }
            @keyframes sphere4{
              0%{
                background-position:50% 0px, center;
              }
              100%{
                background-position:50% 5px, center;
              }
            }
          }
          ~ .platform{
            animation:check2 $duration ease-in-out 1 forwards;
            &:before{
              height:40px;
              transform: translateY(-10px) translateZ(40px) rotateX(-80deg);
              background:linear-gradient(to bottom, rgba(0,0,0,0.025), #efefef);
              box-shadow:0 0 5px -3px #efefef;
            }
            @keyframes check2{
              0%{
                transform:rotateX(0deg);
                box-shadow:inset 0 0px 5px rgba(0,0,0,0.0);
              }
              50%{
                transform:rotateX(-40deg);
                box-shadow:inset 0 -80px 35px -10px rgba(0,0,0,0.035);
              }
              100%{
                transform:rotateX(0deg);
                box-shadow:inset 0 0px 5px rgba(0,0,0,0.0);;
              }
            }
            .hole{
              animation:hole2 $duration ease-in-out 1 forwards;
              @keyframes hole2{
                  0%{
                    box-shadow:0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
                  }
                  50%{
                    box-shadow:0 0 0 2px #fff, 0 -2px 3px 3px #efefef, inset 0 -15px 4px 3px #ddd;
                  }
                  100%{
                    box-shadow:0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
                  }
                }
            }
          }
        }
      }
    }
    .sphere{
        width:25px;
        height:25px;
        border-radius:100%;
        position:absolute;
        z-index:999;
        background:radial-gradient(circle at center, #fff, #efefef 40%) 50% -10px / 100% 100% no-repeat, #efefef;
      background-position:50% 0px, center;
        transform:translateZ(90px) translateX(-50%) translateY(0);
        left:50%;
        top:33px;
        box-shadow:inset -1px -3px 5px -2.5px rgba(0,0,0,0.3), 0 0 5px 0 rgba(0,0,0,0);
        transition:0.6s cubic-bezier(0.975, 0.685, 0.32, 1.05);
      transition-delay:0.15s;
        &:before{
          content:'';
          position:absolute;
          width:100%;
          height:100%;
          background:rgba(0,0,0,0.05);
          border-radius:100%;
          z-index:-1;
          transform:translateZ(-5px) scale(0.8) scaleY(0.5);
          top:15px;
          filter:blur(4px);
          transition:0.75s ease-in-out;
        }
      }
    .platform{
      position:absolute;
      width:75px;
      height:100%;
      top:0;
      left:-12.5px;
      box-shadow:0 0 0 1px rgba(0,0,0,0);
      background:#fff;
      pointer-events:none;
      &:before, &:after{
        content:'';
        position:absolute;
        width:100%;
        height:20px;
        top:100%;
        background:linear-gradient(to bottom, #fff, #efefef);
        transform-origin:top;
        transform:rotateX(-90deg);
        box-shadow:0 0 5px 0 #efefef;
      }
      &:after{
        background:linear-gradient(to top, #fff, #fff);
        transform-origin:bottom;
        transform:rotateX(90deg);
        top:auto;
        bottom:100%;
        box-shadow:0 0 2px 0 #efefef;
      }
      .hole{
        position:absolute;
        width:30px;
        height:30px;
        border-radius:100%;
        box-shadow:0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
        left:50%;
        transform:translateX(-50%);
        top:25px;
        &:last-of-type{
          top:auto;
          bottom:25px;
        }
      }
    }
  }
}
body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.95))), -webkit-gradient(linear, left top, left bottom, from(#0070ff), to(#415fff));
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), linear-gradient(to bottom, #0070ff, #415fff);
}
body:before, body:after {
  content: '';
  position: absolute;
  width: 220px;
  height: 150px;
  left: calc(50% - 2.5px);
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #fff;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 20px 40px 10px rgba(255, 255, 255, 0.85), 0 0 0 0.75px #415fff, 0 10px 40px -20px #0070ff, 0 20px 40px -20px #415fff;
}
body:after {
  box-shadow: none;
  background: -webkit-gradient(linear, left top, left bottom, from(#0070ff), to(#415fff));
  background: linear-gradient(to bottom, #0070ff, #415fff);
  mix-blend-mode: soft-light;
  box-shadow: none;
  z-index: 9;
}
body #wrap {
  position: relative;
  width: 50px;
  height: 150px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 400px;
          perspective: 400px;
  -webkit-transform: translateX(-75px);
          transform: translateX(-75px);
}
body #wrap:before, body #wrap:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  left: calc(100% + 12.5px);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}
body #wrap:after {
  left: calc(-100% - 12.5px);
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
}
body #wrap * {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
body #wrap *:before, body #wrap *:after {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
body #wrap label {
  z-index: 9;
  position: absolute;
  left: 75px;
  font-family: 'Oswald';
  text-transform: uppercase;
  width: 200px;
  font-size: 32px;
  height: 50%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  top: 0;
  color: #fff;
  text-shadow: 0 -1px 2px #fff;
  -webkit-transform: translateY(-2px) translateZ(-15px);
          transform: translateY(-2px) translateZ(-15px);
}
body #wrap label:before {
  content: attr(data-text);
  position: absolute;
  color: rgba(0, 0, 0, 0.25);
  z-index: -1;
  top: 50%;
  -webkit-transform: translateY(calc(-50% + 2px));
          transform: translateY(calc(-50% + 2px));
  left: 0;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
body #wrap label:nth-of-type(2) {
  top: 50%;
}
body #wrap input {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  opacity: 0;
  z-index: 999;
  cursor: pointer;
}
body #wrap input:first-of-type {
  top: 0;
}
body #wrap input:first-of-type:checked ~ .sphere {
  -webkit-animation: sphere1 0.75s ease-in-out 1 forwards, sphere3 0.75s ease-in-out 1 forwards;
          animation: sphere1 0.75s ease-in-out 1 forwards, sphere3 0.75s ease-in-out 1 forwards;
}
@-webkit-keyframes sphere1 {
  0% {
    box-shadow: inset 0px 2px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
  25% {
    box-shadow: inset 0px 3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0px 5px 0px rgba(0, 0, 0, 0);
  }
  62.5% {
    box-shadow: inset 0px 0px 5px -2.5px rgba(0, 0, 0, 0.3), 0 10px 10px 0px rgba(0, 0, 0, 0.1);
  }
  75% {
    box-shadow: inset -1px -1px 5px -2.5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: inset -1px -3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
}
@keyframes sphere1 {
  0% {
    box-shadow: inset 0px 2px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
  25% {
    box-shadow: inset 0px 3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0px 5px 0px rgba(0, 0, 0, 0);
  }
  62.5% {
    box-shadow: inset 0px 0px 5px -2.5px rgba(0, 0, 0, 0.3), 0 10px 10px 0px rgba(0, 0, 0, 0.1);
  }
  75% {
    box-shadow: inset -1px -1px 5px -2.5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: inset -1px -3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes sphere3 {
  0% {
    background-position: 50% 5px, center;
  }
  100% {
    background-position: 50% 0px, center;
  }
}
@keyframes sphere3 {
  0% {
    background-position: 50% 5px, center;
  }
  100% {
    background-position: 50% 0px, center;
  }
}
body #wrap input:first-of-type:checked ~ .platform {
  -webkit-animation: check1 0.75s ease-in-out 1 forwards;
          animation: check1 0.75s ease-in-out 1 forwards;
}
body #wrap input:first-of-type:checked ~ .platform:after {
  height: 40px;
  -webkit-transform: translateY(10px) translateZ(40px) rotateX(80deg);
          transform: translateY(10px) translateZ(40px) rotateX(80deg);
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.025)), to(#efefef));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.025), #efefef);
  box-shadow: 0 0 5px -3px #efefef;
}
@-webkit-keyframes check1 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 -5px 5px -10px rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: rotateX(40deg);
            transform: rotateX(40deg);
    box-shadow: inset 0 80px 35px -10px rgba(0, 0, 0, 0.035);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 -5px 5px -10px rgba(0, 0, 0, 0);
  }
}
@keyframes check1 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 -5px 5px -10px rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: rotateX(40deg);
            transform: rotateX(40deg);
    box-shadow: inset 0 80px 35px -10px rgba(0, 0, 0, 0.035);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 -5px 5px -10px rgba(0, 0, 0, 0);
  }
}
body #wrap input:first-of-type:checked ~ .platform .hole {
  -webkit-animation: hole1 0.75s ease-in-out 1 forwards;
          animation: hole1 0.75s ease-in-out 1 forwards;
}
@-webkit-keyframes hole1 {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
  50% {
    box-shadow: 0 0 0 2px #fff, 0 2px 3px 3px #efefef, inset 0 20px 4px 3px #ddd;
  }
  100% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
}
@keyframes hole1 {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
  50% {
    box-shadow: 0 0 0 2px #fff, 0 2px 3px 3px #efefef, inset 0 20px 4px 3px #ddd;
  }
  100% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
}
body #wrap input:last-of-type {
  bottom: 0;
}
body #wrap input:last-of-type:checked ~ .sphere {
  -webkit-transform: translateZ(90px) translateX(-50%) translateY(55px);
          transform: translateZ(90px) translateX(-50%) translateY(55px);
  -webkit-animation: sphere2 0.75s ease-in-out 1 forwards, sphere4 0.75s ease-in-out 1 forwards;
          animation: sphere2 0.75s ease-in-out 1 forwards, sphere4 0.75s ease-in-out 1 forwards;
}
body #wrap input:last-of-type:checked ~ .sphere:before {
  -webkit-transform: translateY(-20px) translateZ(-5px) scale(1) scaleY(1);
          transform: translateY(-20px) translateZ(-5px) scale(1) scaleY(1);
  background: rgba(0, 0, 0, 0.1);
}
@-webkit-keyframes sphere2 {
  0% {
    box-shadow: inset -1px -3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
  25% {
    box-shadow: inset -1px -3px 8px -2.5px rgba(0, 0, 0, 0.3), 0 0px 5px 0px rgba(0, 0, 0, 0);
  }
  62.5% {
    box-shadow: inset 0px 0px 10px -4px rgba(0, 0, 0, 0.3), 0 -10px 10px 0px rgba(0, 0, 0, 0.1);
  }
  75% {
    box-shadow: inset 0px 2px 8px -4px rgba(0, 0, 0, 0.3), 0 -10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: inset 0px 2px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
}
@keyframes sphere2 {
  0% {
    box-shadow: inset -1px -3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
  25% {
    box-shadow: inset -1px -3px 8px -2.5px rgba(0, 0, 0, 0.3), 0 0px 5px 0px rgba(0, 0, 0, 0);
  }
  62.5% {
    box-shadow: inset 0px 0px 10px -4px rgba(0, 0, 0, 0.3), 0 -10px 10px 0px rgba(0, 0, 0, 0.1);
  }
  75% {
    box-shadow: inset 0px 2px 8px -4px rgba(0, 0, 0, 0.3), 0 -10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: inset 0px 2px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  }
}
@-webkit-keyframes sphere4 {
  0% {
    background-position: 50% 0px, center;
  }
  100% {
    background-position: 50% 5px, center;
  }
}
@keyframes sphere4 {
  0% {
    background-position: 50% 0px, center;
  }
  100% {
    background-position: 50% 5px, center;
  }
}
body #wrap input:last-of-type:checked ~ .platform {
  -webkit-animation: check2 0.75s ease-in-out 1 forwards;
          animation: check2 0.75s ease-in-out 1 forwards;
}
body #wrap input:last-of-type:checked ~ .platform:before {
  height: 40px;
  -webkit-transform: translateY(-10px) translateZ(40px) rotateX(-80deg);
          transform: translateY(-10px) translateZ(40px) rotateX(-80deg);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.025)), to(#efefef));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.025), #efefef);
  box-shadow: 0 0 5px -3px #efefef;
}
@-webkit-keyframes check2 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: rotateX(-40deg);
            transform: rotateX(-40deg);
    box-shadow: inset 0 -80px 35px -10px rgba(0, 0, 0, 0.035);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0);
  }
}
@keyframes check2 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0);
  }
  50% {
    -webkit-transform: rotateX(-40deg);
            transform: rotateX(-40deg);
    box-shadow: inset 0 -80px 35px -10px rgba(0, 0, 0, 0.035);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0);
  }
}
body #wrap input:last-of-type:checked ~ .platform .hole {
  -webkit-animation: hole2 0.75s ease-in-out 1 forwards;
          animation: hole2 0.75s ease-in-out 1 forwards;
}
@-webkit-keyframes hole2 {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
  50% {
    box-shadow: 0 0 0 2px #fff, 0 -2px 3px 3px #efefef, inset 0 -15px 4px 3px #ddd;
  }
  100% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
}
@keyframes hole2 {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
  50% {
    box-shadow: 0 0 0 2px #fff, 0 -2px 3px 3px #efefef, inset 0 -15px 4px 3px #ddd;
  }
  100% {
    box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  }
}
body #wrap .sphere {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  position: absolute;
  z-index: 999;
  background: radial-gradient(circle at center, #fff, #efefef 40%) 50% -10px/100% 100% no-repeat, #efefef;
  background-position: 50% 0px, center;
  -webkit-transform: translateZ(90px) translateX(-50%) translateY(0);
          transform: translateZ(90px) translateX(-50%) translateY(0);
  left: 50%;
  top: 33px;
  box-shadow: inset -1px -3px 5px -2.5px rgba(0, 0, 0, 0.3), 0 0 5px 0 rgba(0, 0, 0, 0);
  -webkit-transition: 0.6s cubic-bezier(0.975, 0.685, 0.32, 1.05);
  transition: 0.6s cubic-bezier(0.975, 0.685, 0.32, 1.05);
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
body #wrap .sphere:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 100%;
  z-index: -1;
  -webkit-transform: translateZ(-5px) scale(0.8) scaleY(0.5);
          transform: translateZ(-5px) scale(0.8) scaleY(0.5);
  top: 15px;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-transition: 0.75s ease-in-out;
  transition: 0.75s ease-in-out;
}
body #wrap .platform {
  position: absolute;
  width: 75px;
  height: 100%;
  top: 0;
  left: -12.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
  background: #fff;
  pointer-events: none;
}
body #wrap .platform:before, body #wrap .platform:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 20px;
  top: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#efefef));
  background: linear-gradient(to bottom, #fff, #efefef);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  box-shadow: 0 0 5px 0 #efefef;
}
body #wrap .platform:after {
  background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff));
  background: linear-gradient(to top, #fff, #fff);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  top: auto;
  bottom: 100%;
  box-shadow: 0 0 2px 0 #efefef;
}
body #wrap .platform .hole {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px 3px #efefef, inset 0 3px 4px 3px #ddd;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 25px;
}
body #wrap .platform .hole:last-of-type {
  top: auto;
  bottom: 25px;
}
Tags:
Categories:
W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *