Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created January 8, 2018 01:00
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CodeMyUI/8d197301874ea1a2f2eec2e58b590e38 to your computer and use it in GitHub Desktop.
Pure CSS Burrito Toggle
Pure CSS Burrito Toggle as seen on https://codepen.io/cobra_winfrey/pen/BJwpLO
<input type='checkbox'>
<div class='wrap'>
<div class='wrapper'>
<div class='tortilla'>
<div class='roll'></div>
</div>
<div class='tortilla'>
<div class='roll'></div>
</div>
<div class='beans'></div>
<div class='cheese'>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
</div>
<div class='lettuce'>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
<div class='shred'></div>
</div>
<div class='tomatoes'>
<div class='tomato'></div>
<div class='tomato'></div>
<div class='tomato'></div>
<div class='tomato'></div>
<div class='tomato'></div>
</div>
</div>
</div>
body {
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: radial-gradient(circle at center, #a9cfbe, #99c6b2);
}
body input {
width: 300px;
height: 125px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 62.5px);
z-index: 9;
opacity: 0;
}
body input:checked ~ .wrap .wrapper {
-webkit-transform: translateX(175px);
transform: translateX(175px);
}
body input:checked ~ .wrap .beans {
-webkit-animation: beanroll 2.5s ease-in-out 1 forwards;
animation: beanroll 2.5s ease-in-out 1 forwards;
opacity: 0;
}
body input:checked ~ .wrap .beans:before {
-webkit-box-shadow: 10px 5px #826343, 5px -10px #826343, 12px -7px #826343, 20px -20px #826343, 17px -22px #826343, 30px -17px #826343, 27px -22px #826343, 13px -80px #826343, 24px -40px #826343, 10px -15px #93704c, 30px -82px #93704c, 35px -82px #93704c, 70px -72px #826343, 60px -52px #826343;
box-shadow: 10px 5px #826343, 5px -10px #826343, 12px -7px #826343, 20px -20px #826343, 17px -22px #826343, 30px -17px #826343, 27px -22px #826343, 13px -80px #826343, 24px -40px #826343, 10px -15px #93704c, 30px -82px #93704c, 35px -82px #93704c, 70px -72px #826343, 60px -52px #826343;
}
body input:checked ~ .wrap .beans:after {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body input:checked ~ .wrap .tortilla {
-webkit-animation: rollup 2.5s ease-in-out 1 forwards;
animation: rollup 2.5s ease-in-out 1 forwards;
}
body input:checked ~ .wrap .tortilla .roll {
-webkit-animation: rollup2 2.5s ease-in-out 1 forwards;
animation: rollup2 2.5s ease-in-out 1 forwards;
}
body input:checked ~ .wrap .cheese, body input:checked ~ .wrap .lettuce, body input:checked ~ .wrap .tomatoes {
-webkit-animation: beanroll 2.5s ease-in-out 1 forwards;
animation: beanroll 2.5s ease-in-out 1 forwards;
}
body input:checked ~ .wrap .cheese .shred, body input:checked ~ .wrap .lettuce .shred, body input:checked ~ .wrap .tomatoes .shred {
-webkit-animation: cheesedrop 2.5s ease-out 1 forwards;
animation: cheesedrop 2.5s ease-out 1 forwards;
}
body input:checked ~ .wrap .cheese .tomato, body input:checked ~ .wrap .lettuce .tomato, body input:checked ~ .wrap .tomatoes .tomato {
-webkit-animation: grow 2.5s ease-out 1 forwards;
animation: grow 2.5s ease-out 1 forwards;
}
body input:checked ~ .wrap .lettuce .shred {
-webkit-animation: lettucedrop 2.5s ease-out 1 forwards;
animation: lettucedrop 2.5s ease-out 1 forwards;
}
body .wrap {
width: 300px;
height: 125px;
border-radius: 75px;
-webkit-box-shadow: 0 0 0 1px #ccc, 0 0 30px 1px #78b499;
box-shadow: 0 0 0 1px #ccc, 0 0 30px 1px #78b499;
background: #fff;
position: relative;
}
body .wrap .wrapper {
width: 110px;
height: 110px;
position: absolute;
left: 7.5px;
top: 7.5px;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
-webkit-transition-delay: 1.25s;
transition-delay: 1.25s;
}
body .wrap .wrapper .cheese {
max-width: 65%;
}
body .wrap .wrapper .cheese, body .wrap .wrapper .lettuce, body .wrap .wrapper .tomatoes {
width: 80%;
height: 80%;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 10%;
left: 10%;
overflow: hidden;
}
body .wrap .wrapper .cheese .tomato, body .wrap .wrapper .lettuce .tomato, body .wrap .wrapper .tomatoes .tomato {
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle at left, #eb5158 7px, rgba(255, 255, 255, 0) 7px), radial-gradient(circle at left, #e6232c 10px, rgba(255, 255, 255, 0) 10px);
left: 20px;
top: 20px;
-webkit-transform: scale(0);
transform: scale(0);
}
body .wrap .wrapper .cheese .tomato:nth-of-type(1), body .wrap .wrapper .lettuce .tomato:nth-of-type(1), body .wrap .wrapper .tomatoes .tomato:nth-of-type(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
body .wrap .wrapper .cheese .tomato:nth-of-type(2), body .wrap .wrapper .lettuce .tomato:nth-of-type(2), body .wrap .wrapper .tomatoes .tomato:nth-of-type(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
body .wrap .wrapper .cheese .tomato:nth-of-type(3), body .wrap .wrapper .lettuce .tomato:nth-of-type(3), body .wrap .wrapper .tomatoes .tomato:nth-of-type(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
body .wrap .wrapper .cheese .tomato:nth-of-type(4), body .wrap .wrapper .lettuce .tomato:nth-of-type(4), body .wrap .wrapper .tomatoes .tomato:nth-of-type(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
body .wrap .wrapper .cheese .tomato:nth-of-type(5), body .wrap .wrapper .lettuce .tomato:nth-of-type(5), body .wrap .wrapper .tomatoes .tomato:nth-of-type(5) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
20% {
-webkit-transform: scale(0);
transform: scale(0);
}
30% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes grow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
20% {
-webkit-transform: scale(0);
transform: scale(0);
}
30% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
body .wrap .wrapper .cheese .tomato:nth-of-type(2), body .wrap .wrapper .lettuce .tomato:nth-of-type(2), body .wrap .wrapper .tomatoes .tomato:nth-of-type(2) {
left: 40px;
top: 40px;
}
body .wrap .wrapper .cheese .tomato:nth-of-type(3), body .wrap .wrapper .lettuce .tomato:nth-of-type(3), body .wrap .wrapper .tomatoes .tomato:nth-of-type(3) {
left: 50px;
top: 20px;
background: radial-gradient(circle at right, #eb5158 7px, rgba(255, 255, 255, 0) 7px), radial-gradient(circle at right, #e6232c 10px, rgba(255, 255, 255, 0) 10px);
}
body .wrap .wrapper .cheese .tomato:nth-of-type(4), body .wrap .wrapper .lettuce .tomato:nth-of-type(4), body .wrap .wrapper .tomatoes .tomato:nth-of-type(4) {
left: 10px;
top: 55px;
background: radial-gradient(circle at right, #eb5158 7px, rgba(255, 255, 255, 0) 7px), radial-gradient(circle at right, #e6232c 10px, rgba(255, 255, 255, 0) 10px);
}
body .wrap .wrapper .cheese .tomato:nth-of-type(5), body .wrap .wrapper .lettuce .tomato:nth-of-type(5), body .wrap .wrapper .tomatoes .tomato:nth-of-type(5) {
left: 45px;
top: 55px;
background: radial-gradient(circle at right, #eb5158 7px, rgba(255, 255, 255, 0) 7px), radial-gradient(circle at right, #e6232c 10px, rgba(255, 255, 255, 0) 10px);
}
body .wrap .wrapper .cheese .shred, body .wrap .wrapper .lettuce .shred, body .wrap .wrapper .tomatoes .shred {
position: absolute;
width: 5px;
height: 5px;
border-radius: 0 0 100% 0;
border: 2px solid;
left: 20px;
top: 20px;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #ffc635 rgba(255, 255, 255, 0);
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
@-webkit-keyframes cheesedrop {
0% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
20% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
100% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
}
@keyframes cheesedrop {
0% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
20% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
100% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
}
body .wrap .wrapper .cheese .shred:nth-of-type(1n), body .wrap .wrapper .lettuce .shred:nth-of-type(1n), body .wrap .wrapper .tomatoes .shred:nth-of-type(1n) {
border-radius: 0 100% 0 0;
border-color: rgba(255, 255, 255, 0) #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 17px;
margin-top: 5px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(2n), body .wrap .wrapper .lettuce .shred:nth-of-type(2n), body .wrap .wrapper .tomatoes .shred:nth-of-type(2n) {
border-radius: 0 100% 0 0;
border-color: rgba(255, 255, 255, 0) #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 35px;
margin-top: 5px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(3n), body .wrap .wrapper .lettuce .shred:nth-of-type(3n), body .wrap .wrapper .tomatoes .shred:nth-of-type(3n) {
border-radius: 100% 0 0 0;
border-color: #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 50px;
margin-top: -2px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(4n), body .wrap .wrapper .lettuce .shred:nth-of-type(4n), body .wrap .wrapper .tomatoes .shred:nth-of-type(4n) {
border-radius: 0 0 0 100%;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #ffc635;
left: 65px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(5n), body .wrap .wrapper .lettuce .shred:nth-of-type(5n), body .wrap .wrapper .tomatoes .shred:nth-of-type(5n) {
border-radius: 100% 0 0 0;
border-color: #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 30px;
margin-top: 5px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(6n), body .wrap .wrapper .lettuce .shred:nth-of-type(6n), body .wrap .wrapper .tomatoes .shred:nth-of-type(6n) {
border-radius: 0 100% 0 0;
border-color: rgba(255, 255, 255, 0) #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 5px;
margin-top: -5px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(7n), body .wrap .wrapper .lettuce .shred:nth-of-type(7n), body .wrap .wrapper .tomatoes .shred:nth-of-type(7n) {
border-radius: 100% 0 0 0;
border-color: #ffc635 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
left: 46px;
margin-top: -2px;
}
body .wrap .wrapper .cheese .shred:nth-of-type(1), body .wrap .wrapper .lettuce .shred:nth-of-type(1), body .wrap .wrapper .tomatoes .shred:nth-of-type(1) {
top: calc(20% + 1.5px);
margin-left: calc(50% - 2px);
-webkit-animation-delay: 0.025s;
animation-delay: 0.025s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(2), body .wrap .wrapper .lettuce .shred:nth-of-type(2), body .wrap .wrapper .tomatoes .shred:nth-of-type(2) {
top: calc(20% + 3px);
margin-left: calc(50% - 4px);
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(3), body .wrap .wrapper .lettuce .shred:nth-of-type(3), body .wrap .wrapper .tomatoes .shred:nth-of-type(3) {
top: calc(20% + 4.5px);
margin-left: calc(50% - 6px);
-webkit-animation-delay: 0.075s;
animation-delay: 0.075s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(4), body .wrap .wrapper .lettuce .shred:nth-of-type(4), body .wrap .wrapper .tomatoes .shred:nth-of-type(4) {
top: calc(20% + 6px);
margin-left: calc(50% - 8px);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(5), body .wrap .wrapper .lettuce .shred:nth-of-type(5), body .wrap .wrapper .tomatoes .shred:nth-of-type(5) {
top: calc(20% + 7.5px);
margin-left: calc(50% - 10px);
-webkit-animation-delay: 0.125s;
animation-delay: 0.125s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(6), body .wrap .wrapper .lettuce .shred:nth-of-type(6), body .wrap .wrapper .tomatoes .shred:nth-of-type(6) {
top: calc(20% + 9px);
margin-left: calc(50% - 12px);
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(7), body .wrap .wrapper .lettuce .shred:nth-of-type(7), body .wrap .wrapper .tomatoes .shred:nth-of-type(7) {
top: calc(20% + 10.5px);
margin-left: calc(50% - 14px);
-webkit-animation-delay: 0.175s;
animation-delay: 0.175s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(8), body .wrap .wrapper .lettuce .shred:nth-of-type(8), body .wrap .wrapper .tomatoes .shred:nth-of-type(8) {
top: calc(20% + 12px);
margin-left: calc(50% - 16px);
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(9), body .wrap .wrapper .lettuce .shred:nth-of-type(9), body .wrap .wrapper .tomatoes .shred:nth-of-type(9) {
top: calc(20% + 13.5px);
margin-left: calc(50% - 18px);
-webkit-animation-delay: 0.225s;
animation-delay: 0.225s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(10), body .wrap .wrapper .lettuce .shred:nth-of-type(10), body .wrap .wrapper .tomatoes .shred:nth-of-type(10) {
top: calc(20% + 15px);
margin-left: calc(50% - 20px);
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(11), body .wrap .wrapper .lettuce .shred:nth-of-type(11), body .wrap .wrapper .tomatoes .shred:nth-of-type(11) {
top: calc(20% + 16.5px);
margin-left: calc(50% - 22px);
-webkit-animation-delay: 0.275s;
animation-delay: 0.275s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(12), body .wrap .wrapper .lettuce .shred:nth-of-type(12), body .wrap .wrapper .tomatoes .shred:nth-of-type(12) {
top: calc(20% + 18px);
margin-left: calc(50% - 24px);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(13), body .wrap .wrapper .lettuce .shred:nth-of-type(13), body .wrap .wrapper .tomatoes .shred:nth-of-type(13) {
top: calc(20% + 19.5px);
margin-left: calc(50% - 26px);
-webkit-animation-delay: 0.325s;
animation-delay: 0.325s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(14), body .wrap .wrapper .lettuce .shred:nth-of-type(14), body .wrap .wrapper .tomatoes .shred:nth-of-type(14) {
top: calc(20% + 21px);
margin-left: calc(50% - 28px);
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(15), body .wrap .wrapper .lettuce .shred:nth-of-type(15), body .wrap .wrapper .tomatoes .shred:nth-of-type(15) {
top: calc(20% + 22.5px);
margin-left: calc(50% - 30px);
-webkit-animation-delay: 0.375s;
animation-delay: 0.375s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(16), body .wrap .wrapper .lettuce .shred:nth-of-type(16), body .wrap .wrapper .tomatoes .shred:nth-of-type(16) {
top: calc(20% + 24px);
margin-left: calc(50% - 32px);
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(17), body .wrap .wrapper .lettuce .shred:nth-of-type(17), body .wrap .wrapper .tomatoes .shred:nth-of-type(17) {
top: calc(20% + 25.5px);
margin-left: calc(50% - 34px);
-webkit-animation-delay: 0.425s;
animation-delay: 0.425s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(18), body .wrap .wrapper .lettuce .shred:nth-of-type(18), body .wrap .wrapper .tomatoes .shred:nth-of-type(18) {
top: calc(20% + 27px);
margin-left: calc(50% - 36px);
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(19), body .wrap .wrapper .lettuce .shred:nth-of-type(19), body .wrap .wrapper .tomatoes .shred:nth-of-type(19) {
top: calc(20% + 28.5px);
margin-left: calc(50% - 38px);
-webkit-animation-delay: 0.475s;
animation-delay: 0.475s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(20), body .wrap .wrapper .lettuce .shred:nth-of-type(20), body .wrap .wrapper .tomatoes .shred:nth-of-type(20) {
top: calc(20% + 30px);
margin-left: calc(50% - 40px);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(21), body .wrap .wrapper .lettuce .shred:nth-of-type(21), body .wrap .wrapper .tomatoes .shred:nth-of-type(21) {
top: calc(20% + 31.5px);
margin-left: calc(50% - 42px);
-webkit-animation-delay: 0.525s;
animation-delay: 0.525s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(22), body .wrap .wrapper .lettuce .shred:nth-of-type(22), body .wrap .wrapper .tomatoes .shred:nth-of-type(22) {
top: calc(20% + 33px);
margin-left: calc(50% - 44px);
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(23), body .wrap .wrapper .lettuce .shred:nth-of-type(23), body .wrap .wrapper .tomatoes .shred:nth-of-type(23) {
top: calc(20% + 34.5px);
margin-left: calc(50% - 46px);
-webkit-animation-delay: 0.575s;
animation-delay: 0.575s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(24), body .wrap .wrapper .lettuce .shred:nth-of-type(24), body .wrap .wrapper .tomatoes .shred:nth-of-type(24) {
top: calc(20% + 36px);
margin-left: calc(50% - 48px);
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
body .wrap .wrapper .cheese .shred:nth-of-type(25), body .wrap .wrapper .lettuce .shred:nth-of-type(25), body .wrap .wrapper .tomatoes .shred:nth-of-type(25) {
top: calc(20% + 37.5px);
margin-left: calc(50% - 50px);
-webkit-animation-delay: 0.625s;
animation-delay: 0.625s;
}
body .wrap .wrapper .lettuce {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -5px;
-webkit-filter: hue-rotate(40deg);
filter: hue-rotate(40deg);
}
body .wrap .wrapper .lettuce .shred {
opacity: 0.5;
}
@-webkit-keyframes lettucedrop {
0% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
30% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
100% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
}
@keyframes lettucedrop {
0% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
30% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
100% {
-webkit-transform: translateY(0vh);
transform: translateY(0vh);
}
}
body .wrap .wrapper .lettuce .shred:nth-of-type(1) {
top: 3px;
margin-left: 0.5px;
-webkit-animation-delay: 0.025s;
animation-delay: 0.025s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(2) {
top: 6px;
margin-left: 1px;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(3) {
top: 9px;
margin-left: 1.5px;
-webkit-animation-delay: 0.075s;
animation-delay: 0.075s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(4) {
top: 12px;
margin-left: 2px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(5) {
top: 15px;
margin-left: 2.5px;
-webkit-animation-delay: 0.125s;
animation-delay: 0.125s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(6) {
top: 18px;
margin-left: 3px;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(7) {
top: 21px;
margin-left: 3.5px;
-webkit-animation-delay: 0.175s;
animation-delay: 0.175s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(8) {
top: 24px;
margin-left: 4px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(9) {
top: 27px;
margin-left: 4.5px;
-webkit-animation-delay: 0.225s;
animation-delay: 0.225s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(10) {
top: 30px;
margin-left: 5px;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(11) {
top: 33px;
margin-left: 5.5px;
-webkit-animation-delay: 0.275s;
animation-delay: 0.275s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(12) {
top: 36px;
margin-left: 6px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(13) {
top: 39px;
margin-left: 6.5px;
-webkit-animation-delay: 0.325s;
animation-delay: 0.325s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(14) {
top: 42px;
margin-left: 7px;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(15) {
top: 45px;
margin-left: 7.5px;
-webkit-animation-delay: 0.375s;
animation-delay: 0.375s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(16) {
top: 48px;
margin-left: 8px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(17) {
top: 51px;
margin-left: 8.5px;
-webkit-animation-delay: 0.425s;
animation-delay: 0.425s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(18) {
top: 54px;
margin-left: 9px;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(19) {
top: 57px;
margin-left: 9.5px;
-webkit-animation-delay: 0.475s;
animation-delay: 0.475s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(20) {
top: 60px;
margin-left: 10px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(21) {
top: 63px;
margin-left: 10.5px;
-webkit-animation-delay: 0.525s;
animation-delay: 0.525s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(22) {
top: 66px;
margin-left: 11px;
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(23) {
top: 69px;
margin-left: 11.5px;
-webkit-animation-delay: 0.575s;
animation-delay: 0.575s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(24) {
top: 72px;
margin-left: 12px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(25) {
top: 75px;
margin-left: 12.5px;
-webkit-animation-delay: 0.625s;
animation-delay: 0.625s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(26) {
top: 78px;
margin-left: 13px;
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(27) {
top: 81px;
margin-left: 13.5px;
-webkit-animation-delay: 0.675s;
animation-delay: 0.675s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(28) {
top: 84px;
margin-left: 14px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(29) {
top: 87px;
margin-left: 14.5px;
-webkit-animation-delay: 0.725s;
animation-delay: 0.725s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(30) {
top: 90px;
margin-left: 15px;
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(31) {
top: 93px;
margin-left: 15.5px;
-webkit-animation-delay: 0.775s;
animation-delay: 0.775s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(32) {
top: 96px;
margin-left: 16px;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(33) {
top: 99px;
margin-left: 16.5px;
-webkit-animation-delay: 0.825s;
animation-delay: 0.825s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(34) {
top: 102px;
margin-left: 17px;
-webkit-animation-delay: 0.85s;
animation-delay: 0.85s;
}
body .wrap .wrapper .lettuce .shred:nth-of-type(35) {
top: 105px;
margin-left: 17.5px;
-webkit-animation-delay: 0.875s;
animation-delay: 0.875s;
}
body .wrap .wrapper .beans {
width: 80%;
height: 80%;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 10%;
left: 10%;
overflow: hidden;
opacity: 1;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
body .wrap .wrapper .beans:before {
content: '';
position: absolute;
width: 5px;
height: 5px;
bottom: 0;
left: 0;
background: #826343;
border-radius: 100%;
-webkit-box-shadow: 10px 5px rgba(255, 255, 255, 0), 5px -10px rgba(255, 255, 255, 0), 12px -7px rgba(255, 255, 255, 0), 20px -20px rgba(255, 255, 255, 0), 17px -22px rgba(255, 255, 255, 0), 30px -17px rgba(255, 255, 255, 0), 27px -22px rgba(255, 255, 255, 0), 13px -80px rgba(255, 255, 255, 0), 24px -40px rgba(255, 255, 255, 0), 10px -15px rgba(255, 255, 255, 0), 30px -82px rgba(255, 255, 255, 0), 35px -82px rgba(255, 255, 255, 0), 70px -72px rgba(255, 255, 255, 0), 60px -52px rgba(255, 255, 255, 0);
box-shadow: 10px 5px rgba(255, 255, 255, 0), 5px -10px rgba(255, 255, 255, 0), 12px -7px rgba(255, 255, 255, 0), 20px -20px rgba(255, 255, 255, 0), 17px -22px rgba(255, 255, 255, 0), 30px -17px rgba(255, 255, 255, 0), 27px -22px rgba(255, 255, 255, 0), 13px -80px rgba(255, 255, 255, 0), 24px -40px rgba(255, 255, 255, 0), 10px -15px rgba(255, 255, 255, 0), 30px -82px rgba(255, 255, 255, 0), 35px -82px rgba(255, 255, 255, 0), 70px -72px rgba(255, 255, 255, 0), 60px -52px rgba(255, 255, 255, 0);
z-index: 1;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
body .wrap .wrapper .beans:after {
content: '';
position: absolute;
width: 95%;
height: 95%;
border-radius: 100%;
background: #93704c;
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);
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
@-webkit-keyframes beanroll {
0% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
60% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-transform: scale(1) scaleY(1);
transform: scale(1) scaleY(1);
}
80% {
-webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%);
clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%);
-webkit-transform: scaleY(1.05);
transform: scaleY(1.05);
}
100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-webkit-transform: scaleY(1.05);
transform: scaleY(1.05);
}
}
@keyframes beanroll {
0% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
60% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
-webkit-transform: scale(1) scaleY(1);
transform: scale(1) scaleY(1);
}
80% {
-webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%);
clip-path: polygon(55% 0, 100% 0, 100% 100%, 55% 100%);
-webkit-transform: scaleY(1.05);
transform: scaleY(1.05);
}
100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-webkit-transform: scaleY(1.05);
transform: scaleY(1.05);
}
}
body .wrap .wrapper .tortilla {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
background: #ece4d3;
z-index: 0;
border-radius: 100%;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
body .wrap .wrapper .tortilla:nth-of-type(2) {
z-index: 2;
background: rgba(255, 255, 255, 0);
}
@-webkit-keyframes rollup {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
}
60% {
-webkit-transform: scaleX(1) translateX(0px);
transform: scaleX(1) translateX(0px);
border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
-webkit-box-shadow: inset 0px 0 2px 0 #e4d9c1, 0 0 0 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 0 2px 0 #e4d9c1, 0 0 0 0 rgba(0, 0, 0, 0.5);
}
80% {
-webkit-transform: scaleX(0.5) translateX(-25px);
transform: scaleX(0.5) translateX(-25px);
border-radius: 100% 100% 100% 100% / 20% 100% 100% 20%;
-webkit-box-shadow: inset 3px 0 5px 5px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
box-shadow: inset 3px 0 5px 5px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
}
100% {
-webkit-transform: scaleX(0.35) translateX(-75px);
transform: scaleX(0.35) translateX(-75px);
border-radius: 100% 100% 100% 100% / 20% 20% 20% 20%;
-webkit-box-shadow: inset 3px 0 5px 15px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
box-shadow: inset 3px 0 5px 15px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
}
}
@keyframes rollup {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
}
60% {
-webkit-transform: scaleX(1) translateX(0px);
transform: scaleX(1) translateX(0px);
border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
-webkit-box-shadow: inset 0px 0 2px 0 #e4d9c1, 0 0 0 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 0 2px 0 #e4d9c1, 0 0 0 0 rgba(0, 0, 0, 0.5);
}
80% {
-webkit-transform: scaleX(0.5) translateX(-25px);
transform: scaleX(0.5) translateX(-25px);
border-radius: 100% 100% 100% 100% / 20% 100% 100% 20%;
-webkit-box-shadow: inset 3px 0 5px 5px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
box-shadow: inset 3px 0 5px 5px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
}
100% {
-webkit-transform: scaleX(0.35) translateX(-75px);
transform: scaleX(0.35) translateX(-75px);
border-radius: 100% 100% 100% 100% / 20% 20% 20% 20%;
-webkit-box-shadow: inset 3px 0 5px 15px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
box-shadow: inset 3px 0 5px 15px #e4d9c1, -10px 0 30px -5px rgba(0, 0, 0, 0.05);
}
}
body .wrap .wrapper .tortilla .roll {
content: '';
position: absolute;
width: 150%;
height: 100%;
left: 0;
top: 0;
z-index: 3;
border-radius: 100%;
background: -webkit-gradient(linear, left top, right top, from(#cdb88c), to(#e4d9c1));
background: linear-gradient(to right, #cdb88c, #e4d9c1);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
@-webkit-keyframes rollup2 {
0% {
-webkit-transform: translateX(-100%) scaleX(1);
transform: translateX(-100%) scaleX(1);
}
50% {
-webkit-transform: translateX(-100%) scaleX(1);
transform: translateX(-100%) scaleX(1);
}
100% {
-webkit-transform: translateX(-20%) scaleX(1.5);
transform: translateX(-20%) scaleX(1.5);
}
}
@keyframes rollup2 {
0% {
-webkit-transform: translateX(-100%) scaleX(1);
transform: translateX(-100%) scaleX(1);
}
50% {
-webkit-transform: translateX(-100%) scaleX(1);
transform: translateX(-100%) scaleX(1);
}
100% {
-webkit-transform: translateX(-20%) scaleX(1.5);
transform: translateX(-20%) scaleX(1.5);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment