Created
January 8, 2018 01:00
Star
You must be signed in to star a gist
Pure CSS Burrito Toggle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Pure CSS Burrito Toggle as seen on https://codepen.io/cobra_winfrey/pen/BJwpLO |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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