|
+colourbg(#829FB3) |
|
|
|
=snakebod($x, $y, $w, $h, $d, $c1, $c2) |
|
$a: -2 + $d |
|
$b: 50 + $d / 2 |
|
background: radial-gradient($x * 1% $y * 1%, $w * 1% $h * 1%, transparent, transparent $a * 1%, $c1 $d * 1%, $c2 $b * 1%, $c1) |
|
|
|
.ashwinder |
|
$edge: #888 |
|
$mid: #ccc |
|
.head |
|
position: relative |
|
background-color: $mid |
|
background: radial-gradient(55% 40%, 50% 60%, $mid, $mid 50%, $edge) |
|
width: 14% |
|
height: 30% |
|
top: 20% |
|
left: 20% |
|
border-top-left-radius: 50% 30% |
|
border-top-right-radius: 50% 30% |
|
border-bottom-left-radius: 50% 70% |
|
border-bottom-right-radius: 50% 70% |
|
z-index: 10 |
|
.eyes |
|
width: 100% |
|
height: 100% |
|
.eye |
|
width: 20% |
|
height: 0 |
|
padding-top: 25% |
|
border-radius: 50% |
|
background: radial-gradient(55% 45%, 100% 100%, #f00, #500 80%, #300) |
|
box-shadow: inset 1px 0 5px #500, 0 0 10px #f90 |
|
top: 45% |
|
z-index: 5 |
|
.e1 |
|
left: 8% |
|
.e2 |
|
right: 5% |
|
transform: scaleX(-1) |
|
.shadows |
|
overflow: hidden |
|
width: 100% |
|
height: 100% |
|
border-top-left-radius: 50% 30% |
|
border-top-right-radius: 50% 30% |
|
border-bottom-left-radius: 50% 70% |
|
border-bottom-right-radius: 50% 70% |
|
.side-shadow |
|
width: 140% |
|
height: 70% |
|
border-radius: 50% |
|
background-color: rgba(#000, 0.2) |
|
box-shadow: 0 0 6px rgba(#000, 0.2) |
|
top: 30% |
|
.s1 |
|
right: -110% |
|
.s2 |
|
left: -110% |
|
.mouth |
|
width: 34% |
|
height: 10% |
|
left: 33% |
|
bottom: -2% |
|
border-radius: 50% |
|
background-color: rgba(#000, 0.15) |
|
.nostrils |
|
width: 100% |
|
height: 100% |
|
.nostril |
|
bottom: 10% |
|
width: 3% |
|
height: 5% |
|
background-color: #555 |
|
border-radius: 50% |
|
.n1 |
|
left: 40% |
|
transform: rotate(20deg) |
|
.n2 |
|
right: 40% |
|
transform: rotate(-20deg) |
|
.tongue |
|
width: 40% |
|
height: 70% |
|
left: 30% |
|
bottom: -70% |
|
.tpart |
|
position: relative |
|
width: 100% |
|
height: 50% |
|
overflow: hidden |
|
.lick |
|
border-radius: 50% |
|
border: 3px solid #DB9EAA |
|
width: 120% |
|
height: 120% |
|
.t1 |
|
top: -20% |
|
left: 25% |
|
.t2 |
|
box-sizing: border-box |
|
right: 23% |
|
top: -20% |
|
.body |
|
width: 100% |
|
height: 100% |
|
top: 0 |
|
.p1 |
|
top: 10% |
|
left: 25% |
|
width: 30% |
|
height: 28% |
|
border-top-left-radius: 40% 40% |
|
border-top-right-radius: 60% 80% |
|
border-bottom-right-radius: 2% 20% |
|
+snakebod(41, 84, 60, 100, 47, $edge, $mid) |
|
z-index: 9 |
|
.p2 |
|
top: 36% |
|
left: 43% |
|
width: 9.5% |
|
height: 30% |
|
transform: rotate(10deg) |
|
background: linear-gradient(left, $edge, $mid 50%, lighten($edge, 0)) |
|
z-index: 8 |
|
box-shadow: 0 -1px 1px 0 $edge |
|
.p3 |
|
bottom: 5% |
|
left: 39% |
|
width: 30% |
|
height: 30% |
|
transform: rotate(5deg) |
|
border-bottom-left-radius: 100% 100% |
|
border-bottom-right-radius: 20% 10% |
|
+snakebod(90, 10, 90, 90, 65, $edge, $mid) |
|
z-index: 7 |
|
.p4 |
|
bottom: 4% |
|
left: 65% |
|
width: 25% |
|
height: 23% |
|
border-top-right-radius: 20% 10% |
|
border-bottom-right-radius: 90% 90% |
|
+snakebod(0, 6, 100, 90, 61, lighten($edge, 2), $mid) |
|
z-index: 7 |
|
.p5 |
|
left: 60% |
|
top: 55% |
|
width: 30% |
|
height: 20% |
|
border-top-left-radius: 10% 2% |
|
border-top-right-radius: 100% 100% |
|
+snakebod(0, 100, 100, 90, 68, lighten($edge, 2), $mid) |
|
z-index: 5 |
|
.p6 |
|
left: 25% |
|
top: 55% |
|
width: 38% |
|
height: 25% |
|
border-top-left-radius: 90% 70% |
|
border-top-right-radius: 10% 10% |
|
+snakebod(85, 135, 120, 130, 80, $edge, $mid) |
|
z-index: 5 |
|
.p7 |
|
left: 5% |
|
top: 62% |
|
width: 21% |
|
height: 20% |
|
transform: rotate(45deg) |
|
border-top-left-radius: 80% 50% |
|
border-bottom-left-radius: 30% 50% |
|
border-bottom-right-radius: 70% 60% |
|
+snakebod(32, 5, 60, 110, 60, lighten($edge, 5), $mid) |
|
box-shadow: inset -2px -2px 3px $edge |
|
.eggs |
|
z-index: 6 |
|
width: 30% |
|
height: 30% |
|
left: 50% |
|
bottom: 10% |
|
.egg |
|
width: 30% |
|
height: 0 |
|
padding-top: 28% |
|
border-radius: 50% |
|
animation: embers 1s infinite alternate linear |
|
background: radial-gradient(50% 40%, 50% 60%, #fa1, #c51 30%, #930 70%, #610) |
|
box-shadow: 0 0 30px #f90, 0 0 5px #500 |
|
@for $i from 1 through 7 |
|
$ember: 0.4 + random() / 50 |
|
.g#{$i} |
|
width: $i + 28% |
|
padding-top: $i + 26% |
|
animation: embers $ember * 1s infinite alternate linear |
|
.g1 |
|
top: 5% |
|
left: 29% |
|
.g2 |
|
top: 8% |
|
left: 55% |
|
.g3 |
|
top: 13% |
|
left: 5% |
|
.g4 |
|
top: 25% |
|
left: 60% |
|
.g5 |
|
top: 26% |
|
left: 25% |
|
.g6 |
|
top: 45% |
|
left: 50% |
|
.g7 |
|
top: 50% |
|
left: 15% |
|
|
|
@keyframes embers |
|
0% |
|
box-shadow: 0 0 20px #f90, 0 0 5px #500 |
|
50% |
|
box-shadow: 0 0 35px #f90, 0 0 5px #500 |
|
90% |
|
box-shadow: 0 0 100px #fc4, 0 0 5px #500 |
|
100% |
|
box-shadow: 0 0 100px #fff, 0 0 5px #500 |
