CodePenネタです。
CSSだけでホッドドッグスタイルのトグルスイッチを実装する方法です。
HamlとSCSSを使っています。

サンプル

クリックするとトグルスイッチの動作でホットドッグになります。

See the Pen Hot Doggle by Adam Kuhn (@cobra_winfrey) on CodePen.

HTML(Haml)

%input{:type => "checkbox"}/
.wrap
 .mustard
 .bun
  .dog
   .head
   .body

CSS(SCSS)

$r: #d54f55;
$t: transparent;
$b: #ecc9a5;
$r2: #ffc635;

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:white;
  background-image: linear-gradient(90deg, rgba(111,205,227,.5) 50%, transparent 50%),
  linear-gradient(rgba(111,205,227,.5) 50%, transparent 50%);
  background-size:100px 100px;
  input{
    width:350px;
    height:150px;
    position:absolute;
    top:calc(50% - 75px);
    left:calc(50% - 125px);
    z-index:999;
    opacity:0;
    &:checked ~ .wrap{
      .mustard{
        animation:squirt 1.25s ease-out 1 forwards;
        animation-delay:0.8s;
      }
      .bun{
        animation:shade 0.45s ease-in 1 forwards;
        &:before{
          animation:opent 0.45s ease-in 1 forwards;
        }
        &:after{
          animation:open 0.45s ease-in 1 forwards;
        }
      }
      .dog{
        animation:bright 0.45s linear 1 forwards;
        animation-delay:0.35s;
      }
      .body{
        animation:fall 0.45s linear 1 forwards;
        animation-delay:0.35s;
        &:before{
          animation:slideleft 0.45s ease-in-out 1 forwards;
          animation-delay:0.35s;
        }
      }
      .head{
        animation:fall2 0.45s ease-out 1 forwards;
        animation-delay:0.35s;
        &:before{
          animation:slideover 0.45s ease-in-out 1 forwards;
          animation-delay:0.35s;
        }
      }
    }
  }
  .wrap{
    width:350px;
    height:150px;
    box-shadow:0 0 20px 1px rgba(0,0,0,0.25);
    border-radius:100px;
    position:relative;
    background:#fff;
    .mustard{
          position:absolute;
          z-index:9;
          width:34px;
          height:220px;
          left:calc(50% - 17px);
          background: 
radial-gradient(circle at 100% 50%, transparent 20%, $r2 21%, $r2 34%, transparent 35%, transparent) 18px 50%,
radial-gradient(circle at 0% 50%, transparent 20%, $r2 21%, $r2 34%, transparent 35%, transparent) 18px -25px;
          background-color: $t;
          background-size:32.5px 45px;
          top:-40px;
          transform:rotate(90deg);
          clip-path: polygon(-10% -10%, 110% -10%, 110% -10%, -10% -10%);

          @keyframes squirt{
            to{
              clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
            }
          }
          &:before, &:after{
            content:'';
            position:absolute;
            width:10px;
            height:10px;
            background:$r2;
            border-radius:100%;
            right:1px;
            top:0px;
          }
          &:after{
            top:auto;
            bottom:0;
          }
     }
    .bun{
      position:absolute;
      width:95%;
      height:90%;
      left:2.5%;
      top:5%;
      border-radius:100px;
      perspective:600px;
      overflow:hidden;
      z-index:1;
      background:$b;
      box-shadow:inset 0 10px 30px darken($b, 10%), inset 0 -10px 30px darken($b, 10%);
      @keyframes shade{
        to{
          box-shadow:inset 0 0px 30px darken($b, 10%), inset 0 -0px 30px darken($b, 10%);
        }
      }
      &:after{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        background:#fff;
        left:0;
        top:0;
        clip-path: polygon(90% 50%, 100% 50%, 100% 50%, 100% 50%, 90% 50%, 10% 50%, 0 50%, 0 50%, 0 50%, 10% 50%);
        @keyframes open{
          to{
            clip-path: polygon(90% 50%, 100% 10%, 100% 50%, 100% 95%, 90% 50%, 10% 50%, 0 95%, 0 50%, 0 10%, 10% 50%);
          }
        }
      }
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:5%;
        left:0;
        top:50%;
        background:linear-gradient(to bottom, lighten($b, 10%), $b, lighten($b, 10%));
        transform:translateY(-50%);
      }
      @keyframes opent{
        0%{
          transform:translateY(-50%);
        }
        100%{
          transform:translateY(-50%) scaleY(11.5);
        }
      }
      .dog{
        position:absolute;
        width:135px;
        height:135px;
        top:0;
        border-radius:100%;
        perspective:700px;
        filter:brightness(1);
        z-index:2;
        @keyframes bright{
          80%{
            filter:brightness(0.95);
            transform:scale(0.795) translateX(25px);
          }
          100%{
            filter:brightness(0.95);
            transform:scale(0.8) translateX(25px);
          }
        }

        .head{
          position:absolute;
          width:100%;
          height:100%;
          background:$r;
          border-radius:100%;
          z-index:1;
          overflow:hidden;
          @keyframes fall2{
            0%{
              transform:translateX(0) scale(1);
            }
            50%{
              transform:translateX(280px) scale(0.7);
            }
            100%{
              transform:translateX(225px) scale(0.5);
            }
          }
          &:before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            border-radius:100%;
            background:radial-gradient(circle at center, $t, $t 20%, $r 20%), linear-gradient(to bottom, $t, $t 49%, darken($r, 15%) 49%, darken($r, 15%) 51%, $t 51%), linear-gradient(to right, $t, $t 49%, darken($r, 15%) 49%, darken($r, 15%) 51%, $t 51%), linear-gradient(45deg, $t, $t 49%, darken($r, 15%) 49%, darken($r, 15%) 51%, $t 51%), linear-gradient(135deg, $t, $t 49%, darken($r, 15%) 49%, darken($r, 15%) 51%, $t 51%);
            box-shadow:inset 0 0 20px 10px darken($r, 5%);
            @keyframes slideover{
              to{
                transform:translateX(115px);
                box-shadow:inset -100px 0 50px 0px darken($r, 5%);
              }
            }

          }
        }
        .body{
          position:absolute;
          left:0px;
          top:33px;
          width:335px;
          height:50%;
          background:$r;
          border-radius:100px;
          transform-style:preserve-3d;
          overflow:hidden;
          transform-origin:0% 50%;
          transform:translateX(35px) rotateY(-86deg);
          @keyframes fall{
            0%{
              transform:translateX(35px) rotateY(-86deg);
            }
            90%{
              transform:translateX(0px) rotateY(5deg);
            }
            100%{
              transform:translateX(0px) rotateY(0deg);
            }
          }
          &:before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:linear-gradient(to right, darken($r, 10%), $r);
            @keyframes slideleft{
              to{
                transform:translateX(-100%);
              }
            }
          }
        }
      }
    }
  }
}

一言

ホットドッグ屋さんには良いかも。


コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。