Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hot Doggle
%input{:type => "checkbox"}/
.wrap
.mustard
.bun
.dog
.head
.body
$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%);
}
}
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.