CodePenネタです。
CSSだけでブリトースタイルのトグルスイッチを実装する方法です。
HTMLはHaml、CSSはSCSSを使っています。

サンプル

クリックするとクルッとブリトーが出来上がります。
オシャレです。

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

HTML(Haml)

%input{:type => "checkbox"}/
.wrap
 .wrapper
  -(1..2).each do
   .tortilla
    .roll
  .beans
  .cheese
   -(1..35).each do
    .shred
  .lettuce
   -(1..35).each do
    .shred
  .tomatoes
   -(1..5).each do
    .tomato

CSS(SCSS)

とても複雑です。

$br: #ece4d3;
$m: #826343;
$t: rgba(255,255,255,0);
$c: #ffc635;
$bg: #a9cfbe;
$to: #eb5158;

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at center, $bg, darken($bg, 5%));
  input{
    width:300px;
    height:125px;
    position:absolute;
    left:calc(50% - 150px);
    top:calc(50% - 62.5px);
    z-index:9;
    opacity:0;
      &:checked ~ .wrap{
        .wrapper{
          transform:translateX(175px);
        }
        .beans{
          animation:beanroll 2.5s ease-in-out 1 forwards;
          opacity:0;
          &:before{
            box-shadow:10px 5px $m, 5px -10px $m, 12px -7px $m, 20px -20px $m, 17px -22px $m, 30px -17px $m, 27px -22px $m, 13px -80px $m, 24px -40px $m, 10px -15px lighten($m, 5%), 30px -82px lighten($m, 5%), 35px -82px lighten($m, 5%), 70px -72px $m, 60px -52px $m;
          }
          &:after{
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          }
        }
        .tortilla{
          animation:rollup 2.5s ease-in-out 1 forwards;
          .roll{
            animation:rollup2 2.5s ease-in-out 1 forwards;
          }
        }
        .cheese, .lettuce, .tomatoes{
          animation:beanroll 2.5s ease-in-out 1 forwards;
          .shred{
            animation:cheesedrop 2.5s ease-out 1 forwards;
          }
          .tomato{
            animation:grow 2.5s ease-out 1 forwards;
          }
        }
        .lettuce{
          .shred{
            animation:lettucedrop 2.5s ease-out 1 forwards;
          }
        }
        }
  }
  .wrap{
    width:300px;
    height:125px;
    border-radius:75px;
    box-shadow:0 0 0 1px #ccc, 0 0 30px 1px darken($bg, 15%);
    background:#fff;
    position:relative;
    .wrapper{
      width:110px;
      height:110px;
      position:absolute;
      left:7.5px;
      top:7.5px;
      transform:translateX(0);
      transition:1.5s ease-in-out;
      transition-delay:1.25s;
      .cheese{
        max-width:65%;
      }
      .cheese, .lettuce, .tomatoes{
        width:80%;
        height:80%;
        z-index:1;
        position:absolute;
        border-radius:100%;
        top:10%;
        left:10%;
        overflow:hidden;
        .tomato{
          position:absolute;
          width:20px;
          height:20px;
          background:radial-gradient(circle at left, $to 7px, $t 7px), radial-gradient(circle at left, darken($to, 10%) 10px, $t 10px);
          left:20px;
          top:20px;
          transform:scale(0);
          @for $i from 1 through 5{
            &:nth-of-type(#{$i}){
              animation-delay:#{$i/10}s;
            }
          }
          @keyframes grow{
            0%{
              transform:scale(0);
            }
            20%{
              transform:scale(0);
            }
            30%{
              transform:scale(0);
            }
            40%{
              transform:scale(1.1);
            }
            45%{
              transform:scale(1);
            }
            100%{
              transform:scale(1);
            }
          }
          &:nth-of-type(2){
            left:40px;
            top:40px;
          }
          &:nth-of-type(3){
            left:50px;
            top:20px;
            background:radial-gradient(circle at right, $to 7px, $t 7px), radial-gradient(circle at right, darken($to, 10%) 10px, $t 10px);
          }
          &:nth-of-type(4){
            left:10px;
            top:55px;
            background:radial-gradient(circle at right, $to 7px, $t 7px), radial-gradient(circle at right, darken($to, 10%) 10px, $t 10px);
          }
          &:nth-of-type(5){
            left:45px;
            top:55px;
            background:radial-gradient(circle at right, $to 7px, $t 7px), radial-gradient(circle at right, darken($to, 10%) 10px, $t 10px);
          }
        }
        .shred{
          position:absolute;
          width:5px;
          height:5px;
          border-radius:0 0 100% 0;
          border:2px solid;
          left:20px;
          top:20px;
          border-color:$t $t $c $t;
          transform:translateY(-100vh);
          @keyframes cheesedrop{
            0%{
              transform:translateY(-100vh);
            }
            20%{
              transform:translateY(0vh);
            }
            100%{
              transform:translateY(0vh);
            }
          }
          &:nth-of-type(1n){
            border-radius:0 100% 0 0;
            border-color:$t $c $t $t;
            left:17px;
            margin-top:5px;
          }
          &:nth-of-type(2n){
            border-radius:0 100% 0 0;
            border-color:$t $c $t $t;
            left:35px;
            margin-top:5px;
          }
          &:nth-of-type(3n){
            border-radius:100% 0 0 0;
            border-color:$c $t $t $t;
            left:50px;
            margin-top:-2px;
          }
          &:nth-of-type(4n){
            border-radius:0 0 0 100%;
            border-color:$t $t $t $c;
            left:65px;
          }
          &:nth-of-type(5n){
            border-radius:100% 0 0 0;
            border-color:$c $t $t $t;
            left:30px;
            margin-top:5px;
          }
          &:nth-of-type(6n){
            border-radius:0 100% 0 0;
            border-color:$t $c $t $t;
            left:5px;
            margin-top:-5px;
          }
          &:nth-of-type(7n){
            border-radius:100% 0 0 0;
            border-color:$c $t $t $t;
            left:46px;
            margin-top:-2px;
          }
          @for $i from 1 through 25{
            &:nth-of-type(#{$i}){
              top:calc(20% + #{$i * 1.5}px);
              margin-left:calc(50% - #{$i * 2}px);
              animation-delay:#{$i/40}s;
            }
          }

        }
      }
      .lettuce{
        transform:rotate(0deg);
        margin-top:-5px;
        filter:hue-rotate(40deg);
        .shred{
          opacity:0.5;
          @keyframes lettucedrop{
            0%{
              transform:translateY(-100vh);
            }
            30%{
              transform:translateY(0vh);
            }
            100%{
              transform:translateY(0vh);
            }
          }
          @for $i from 1 through 35{
            &:nth-of-type(#{$i}){
              top:#{$i * 3}px;
              margin-left:#{$i/2}px;
              animation-delay:#{$i/40}s;
            }
          }
        }
      }
      .beans{
        width:80%;
        height:80%;
        z-index:1;
        position:absolute;
        border-radius:100%;
        top:10%;
        left:10%;
        overflow:hidden;
        opacity:1;
        transition:opacity 0.25s ease-in-out;
        transition-delay:2s;
        &:before{
          content:'';
          position:absolute;
          width:5px;
          height:5px;
          bottom:0;
          left:0;
          background:$m;
          border-radius:100%;
          box-shadow:10px 5px $t, 5px -10px $t, 12px -7px $t, 20px -20px $t, 17px -22px $t, 30px -17px $t, 27px -22px $t, 13px -80px $t, 24px -40px $t, 10px -15px lighten($t, 5%), 30px -82px lighten($t, 5%), 35px -82px lighten($t, 5%), 70px -72px $t, 60px -52px $t;
          z-index:1;
          transition:0.2s ease-in-out;
          transition-delay:0.2s;

        }
        &:after{
          content:'';
          position:absolute;
          width:95%;
          height:95%;
          border-radius:100%;
          background:lighten($m, 5%);
          z-index:0;
          top:2.5%;
          left:2.5%;
          -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          transition:0.4s ease-in-out;
        }

        @keyframes beanroll{
          0%{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          }
          60%{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            transform:scale(1) scaleY(1);
          }
          80%{
            clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%);
            transform:scaleY(1.05);
          }
          100%{
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            transform:scaleY(1.05);
          }
        }
      }
      .tortilla{
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        overflow:hidden;
        background:$br;
        z-index:0;
        border-radius:100%;
        transform-origin:100% 50%;
        &:nth-of-type(2){
          z-index:2;
          background:$t;
        }
        @keyframes rollup{
          0%{
            transform:scaleX(1);
            border-radius:100% 100% 100% 100% / 100% 100% 100% 100%;
          }
          60%{
            transform:scaleX(1) translateX(0px);
            border-radius:100% 100% 100% 100% / 100% 100% 100% 100%;
            box-shadow:inset 0px 0 2px 0 darken($br, 5%), 0 0 0 0 rgba(0,0,0,0.5);
          }
          80%{
            transform:scaleX(0.5) translateX(-25px);
            border-radius:100% 100% 100% 100% / 20% 100% 100% 20%;
            box-shadow:inset 3px 0 5px 5px darken($br, 5%), -10px 0 30px -5px rgba(0,0,0,0.05);
          }
          100%{
            transform:scaleX(0.35) translateX(-75px);
            border-radius:100% 100% 100% 100% / 20% 20% 20% 20%;
            box-shadow:inset 3px 0 5px 15px darken($br, 5%), -10px 0 30px -5px rgba(0,0,0,0.05);
          }
        }
        .roll{
          content:'';
          position:absolute;
          width:150%;
          height:100%;
          left:0;
          top:0;
          z-index:3;
          border-radius:100%;
          background:linear-gradient(to right, darken($br, 20%), darken($br, 5%));
          transform:translateX(-100%);
          @keyframes rollup2{
            0%{
              transform:translateX(-100%) scaleX(1);
            }
            50%{
              transform:translateX(-100%) scaleX(1);
            }
            100%{
              transform:translateX(-20%) scaleX(1.5);
            }
          }
        }
      }
    }
  }
}

一言

ブリトー屋さんには良いかも。

コメントを投稿する

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