분류
html
순수 HTML로 화려한 게임창을 구현..
본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
<title>Super Mail Quest</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css">
.sc{
display:none;
}
@supports (animation:game){
#interactive:checked ~ .wrapper [class].fallback{
display:none;
}
#interactive:checked ~ .wrapper .game{
display:block !important;
max-height:none !important;
}
}
#sc0:checked ~ * .sc0,
#sc1:checked ~ * .sc1,
#sc1b:checked ~ * .sc1,
#sc2:checked ~ * .sc2,
#sc2b:checked ~ * .sc2,
#sc2c:checked ~ * .sc2,
#sc2d:checked ~ * .sc2,
#sc3:checked ~ * .sc3,
#sc3b:checked ~ * .sc3,
#sc3c:checked ~ * .sc3,
#sc3d:checked ~ * .sc3,
#sc3e:checked ~ * .sc3,
#sc3f:checked ~ * .sc3,
#sc3g:checked ~ * .sc3,
#sc4:checked ~ * .sc4,
#sc4a1:checked ~ * .sc4,
#sc4a2:checked ~ * .sc4,
#sc4b:checked ~ * .sc4,
#sc4b1:checked ~ * .sc4,
#sc4b2:checked ~ * .sc4,
#sc4b3:checked ~ * .sc4,
#sc4b4:checked ~ * .sc4,
#sc4b5:checked ~ * .sc4,
#sc4b6:checked ~ * .sc4,
#sc4c:checked ~ * .sc4,
#sc4c1:checked ~ * .sc4,
#sc4c2:checked ~ * .sc4,
#sc4d:checked ~ * .sc4,
#sc4d1:checked ~ * .sc4,
#sc4d2:checked ~ * .sc4,
#sc4d3:checked ~ * .sc4,
#sc4d4:checked ~ * .sc4,
#sc4d5:checked ~ * .sc4,
#sc4d6:checked ~ * .sc4,
#sc4e:checked ~ * .sc4,
#sc4e1:checked ~ * .sc4,
#sc4e2:checked ~ * .sc4,
#sc5:checked ~ * .sc5,
#sc5b:checked ~ * .sc5,
#sc5c:checked ~ * .sc5,
#sc5d:checked ~ * .sc5,
#sc5e:checked ~ * .sc5,
#sc5f:checked ~ * .sc5,
#sc6:checked ~ * .sc6,
#sc6b:checked ~ * .sc6,
#sc6c:checked ~ * .sc6,
#sc6d:checked ~ * .sc6,
#sc6e:checked ~ * .sc6,
#sc6f:checked ~ * .sc6,
#sc6g:checked ~ * .sc6,
#sc6h:checked ~ * .sc6,
#sc6i:checked ~ * .sc6,
#sc7:checked ~ * .sc7,
#sc7b:checked ~ * .sc7,
#sc7c:checked ~ * .sc7,
#sc7d:checked ~ * .sc7,
#sc7e:checked ~ * .sc7,
#sc7f:checked ~ * .sc7,
#sc7g:checked ~ * .sc7,
#sc8:checked ~ * .sc8,
#sc8b:checked ~ * .sc8,
#sc8c:checked ~ * .sc8,
#sc8d:checked ~ * .sc8,
#sc8e:checked ~ * .sc8,
#sc8f:checked ~ * .sc8,
#sc8g:checked ~ * .sc8,
#sc8h:checked ~ * .sc8,
#sc8i:checked ~ * .sc8,
#sc8j:checked ~ * .sc8,
#sc8k:checked ~ * .sc8,
#sc8l:checked ~ * .sc8 {
display: block;
-webkit-animation: fade-in 1s linear forwards;
-webkit-animation-iteration-count: 1;
}
/* Sub scs */
#sc1:checked ~ * #ct-1b,
#sc1b:checked ~ * #ct-1a,
#sc2:checked ~ * #ct-2b, #ct-2c, #ct-2d,
#sc2b:checked ~ * #ct-2a, #ct-2c, #ct-2d,
#sc2c:checked ~ * #ct-2a, #ct-2b, #ct-2d,
#sc2d:checked ~ * #ct-2a, #ct-2b, #ct-2c,
#sc3:checked ~ * #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3b:checked ~ * #ct-3a, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3c:checked ~ * #ct-3a, #ct-3b, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3d:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3e, #ct-3f, #ct-3g,
#sc3e:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3f, #ct-3g,
#sc3f:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3g,
#sc3g:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f,
#sc4:checked ~ * #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a1:checked ~ * #ct-4a, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a2:checked ~ * #ct-4a, #ct-4a1, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d,#ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #csont-4d, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4e, #ct-4e1, #ct-4e2,
#sc4e:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e1, #ct-4e2,
#sc4e1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e2,
#sc4e2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1,
#sc5:checked ~ * #ct-5b, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5b:checked ~ * #ct-5a, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5c:checked ~ * #ct-5a, #ct-5b, #ct-5d, #ct-5e, #ct-5f,
#sc5d:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5e, #ct-5f,
#sc5e:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5f,
#sc5f:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5e,
#sc6:checked ~ * #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6b:checked ~ * #ct-6a, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6c:checked ~ * #ct-6a, #ct-6b, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6d:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6e:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6f:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6g, #ct-6h, #ct-6i,
#sc6g:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6h, #ct-6i,
#sc6h:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6i,
#sc6i:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h,
#sc7:checked ~ * #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7b:checked ~ * #ct-7a, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7c:checked ~ * #ct-7a, #ct-7b, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7d:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7e, #ct-7f, #ct-7g,
#sc7e:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7f, #ct-7g,
#sc7f:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7g,
#sc7g:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f,
#sc8:checked ~ * #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8b:checked ~ * #ct-8a, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8c:checked ~ * #ct-8a, #ct-8b, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8d:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8e:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8f:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8g:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8h:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8i:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8j, #ct-8k, #ct-8l,
#sc8j:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8k, #ct-8l,
#sc8k:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8l,
#sc8l:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k {
display: none;
}
#sc1b:checked ~ * #ct-1b,
#sc2b:checked ~ * #ct-2b,
#sc2c:checked ~ * #ct-2c,
#sc2d:checked ~ * #ct-2d,
#sc3b:checked ~ * #ct-3b,
#sc3c:checked ~ * #ct-3c,
#sc3d:checked ~ * #ct-3d,
#sc3e:checked ~ * #ct-3e,
#sc3f:checked ~ * #ct-3f,
#sc3g:checked ~ * #ct-3g,
#sc4a:checked ~ * #ct-4a,
#sc4a1:checked ~ * #ct-4a1,
#sc4a2:checked ~ * #ct-4a2,
#sc4b:checked ~ * #ct-4b,
#sc4b1:checked ~ * #ct-4b1,
#sc4b2:checked ~ * #ct-4b2,
#sc4b3:checked ~ * #ct-4b3,
#sc4b4:checked ~ * #ct-4b4,
#sc4b5:checked ~ * #ct-4b5,
#sc4b6:checked ~ * #ct-4b6,
#sc4c:checked ~ * #ct-4c,
#sc4c1:checked ~ * #ct-4c1,
#sc4c2:checked ~ * #ct-4c2,
#sc4d:checked ~ * #ct-4d,
#sc4d1:checked ~ * #ct-4d1,
#sc4d2:checked ~ * #ct-4d2,
#sc4d3:checked ~ * #ct-4d3,
#sc4d4:checked ~ * #ct-4d4,
#sc4d5:checked ~ * #ct-4d5,
#sc4d6:checked ~ * #ct-4d6,
#sc4e:checked ~ * #ct-4e,
#sc4e1:checked ~ * #ct-4e1,
#sc4e2:checked ~ * #ct-4e2,
#sc5b:checked ~ * #ct-5b,
#sc5c:checked ~ * #ct-5c,
#sc5d:checked ~ * #ct-5d,
#sc5e:checked ~ * #ct-5e,
#sc5f:checked ~ * #ct-5f,
#sc6b:checked ~ * #ct-6b,
#sc6c:checked ~ * #ct-6c,
#sc6d:checked ~ * #ct-6d,
#sc6e:checked ~ * #ct-6e,
#sc6f:checked ~ * #ct-6f,
#sc6g:checked ~ * #ct-6g,
#sc6h:checked ~ * #ct-6h,
#sc6i:checked ~ * #ct-6i,
#sc7b:checked ~ * #ct-7b,
#sc7c:checked ~ * #ct-7c,
#sc7d:checked ~ * #ct-7d,
#sc7e:checked ~ * #ct-7e,
#sc7f:checked ~ * #ct-7f,
#sc7g:checked ~ * #ct-7g,
#sc8b:checked ~ * #ct-8b,
#sc8c:checked ~ * #ct-8c,
#sc8d:checked ~ * #ct-8d,
#sc8e:checked ~ * #ct-8e,
#sc8f:checked ~ * #ct-8f,
#sc8g:checked ~ * #ct-8g,
#sc8h:checked ~ * #ct-8h,
#sc8i:checked ~ * #ct-8i,
#sc8j:checked ~ * #ct-8j,
#sc8k:checked ~ * #ct-8k,
#sc8l:checked ~ * #ct-8l {
display: block;
-webkit-animation: fade-in 1s;
-webkit-animation-iteration-count: 1 linear forwards;
}
.bg-sc {
width: 60em;
height: 42em;
position: relative;
overflow: hidden;
}
.bg-0{background-image: url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-0_1.jpg'); background-position: center bottom;}
.bg-1{background-image: url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-1_2.jpg'); background-position: center bottom;}
.bg-2{background-image: url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-2_3.jpg'); background-position: center bottom;}
.bg-3{background-image: url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-3_4.jpg'); background-position: center bottom;}
.bg-4{background-image: url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-4_5.jpg'); background-position: center bottom;}
.bg-5{background-image: url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-5_6.jpg'); background-position: center bottom;}
.bg-6{background-image: url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-6_7.jpg'); background-position: center bottom;}
.bg-7{background-image: url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-7_8.jpg'); background-position: center bottom;}
.bg-8{background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-8_9.png'); background-position: center bottom;}
.ui {
background: #2b2122;
background: -webkit-linear-gradient(top, #2b2122 0%,#000000 100%);
background: linear-gradient(top bottom, #2b2122 0%,#000000 100%);
padding: 2em 3em;
width: 54em;
}
.panel {
background: #0d082d;
background: -webkit-linear-gradient(top, #333861 0%,#0d082d 100%);
background: linear-gradient(top bottom, #333861 0%,#0d082d 100%);
border: 5px solid #ffffff;
mso-border-alt:none;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 53em;
}
.cont {
width: 90%;
padding: 5%;
}
/* GENERIC sc STYLES */
.hero-w-t {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-t-sprite_45.png');
-webkit-animation:sprite .5s steps(3) 7 forwards;
}
.hero-w-r {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-r-sprite_46.png');
-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-w-b {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
-webkit-animation:sprite .6s steps(5) 7 forwards;
}
.hero-w-l {
width:6em;
position: relative;
height:6.4em;
background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-l-sprite_48.png');
-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-e-t {
margin: 29em 0 0 27em;
-webkit-animation: entrance-t 4s;
position: absolute;
z-index:10;
}
.hero-e-r {
margin: 25em 0 0 38em;
-webkit-animation: entrance-r 4s;
position: absolute;
z-index:10;
}
.hero-e-b {
margin: 32em 0 0 27em;
-webkit-animation: entrance-b 4s;
position: absolute;
z-index:10;
}
.hero-e-l {
margin: 25em 0 0 18em;
-webkit-animation: entrance-l 4s;
position: absolute;
z-index:10;
}
/* sc 0 STYLES */
.logo{
padding:3em 0 0 0;
width: 90%;
height: auto;
-webkit-animation: logo 3.5s;
}
.hero-container {
position: relative;
background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-anim_49.gif'); background-position: center bottom;
background-size: cover;
width: 60em;
height: 8.3em;
margin: 16.9em 0 0 0;
}
.sc-0-ui label h2 {
-webkit-animation: blink 2s linear infinite;
}
/* sc 1 STYLES */
#sc1:checked ~ * .grandolf,
#sc1:checked ~ * .dmarkster,
#sc1:checked ~ * .obiwon {
display: none;
}
#sc1b:checked ~ * .grandolf {
display: block;
margin: 28em 0 0 40em;
-webkit-animation:jump-for-joy .6s ease-in infinite;
}
#sc1b:checked ~ * .dmarkster {
display: block;
margin: 18em 0 0 27.5em;
-webkit-animation:jump-for-joy .8s ease-in infinite;
-webkit-animation-delay: 3.1s;
}
#sc1b:checked ~ * .fade-in {
display: block;
opacity: 0;
-webkit-animation: transport-in 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 2.5s;
}
#sc1b:checked ~ * .obiwon {
display: block;
margin: 28em 0 0 15em;
-webkit-animation:jump-for-joy .7s ease-in infinite;
-webkit-animation-delay: .3s;
}
#sc1b:checked ~ * .fireworks {
display: block;
width: 60em;
height: 42em;
position: absolute;
background-image: url('http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/fireworks_50.gif');
background-position: center top;
background-size:60em 42em;
}
/* sc 2 STYLES */
.cat {
margin: 22em 0 0 16em;
position: absolute;
}
#laser {
margin: 28em 0 0 23em;
position: absolute;
z-index: 13;
display: none;
}
#poof {
margin: 23em 0 0 18em;
position: absolute;
display: none;
z-index: 5;
}
#spam {
margin: 27.5em 0 0 38em;
position: absolute;
z-index: 12;
display: none;
}
#sc2c:checked ~ * .hero-e-r{margin: 28em 0 0 38em;}
#sc2c:checked ~ * .hero-w-r{
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 7em 4.4em;
width: 7em;
height: 4.4em;
}
#sc2d:checked ~ * #laser{
display: block;
-webkit-animation: shot-fired .5s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2c:checked ~ * #laser{
display: block;
-webkit-animation: target-accuired .2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #spam{
display: block;
-webkit-animation: shield-me-up 1s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #poof{
display: block;
width:8.5em;
height:11.8em;
background-repeat:no-repeat!important;
background-image:url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/smoke_52.png');
-webkit-animation: sprite 1s steps(6) 1 forwards;
}
#sc2d:checked ~ * .cat{
-webkit-animation: smoke-the-cat 1.5s forwards;
-webkit-animation-iteration-count: 1;
}
/* sc 3 STYLES */
.grandolf {
margin: 22em 0 0 36em;
position: absolute;
}
#sc3g:checked ~ * .hero-e-l{
-webkit-animation: body-shot 1s forwards;
-webkit-animation-iteration-count: 1;
}
/* sc 4 STYLES */
.dmarkster {
display: none;
position: absolute;
margin: 18em 0 0 28em;
z-index: 10;
}
#sc4:checked ~ * .hero-e-b,
#sc4a1:checked ~ * .hero-e-b,
#sc4a2:checked ~ * .hero-e-b,
#sc4b:checked ~ * .hero-e-b,
#sc4b1:checked ~ * .hero-e-b,
#sc4b2:checked ~ * .hero-e-b,
#sc4b3:checked ~ * .hero-e-b,
#sc4b4:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b6:checked ~ * .hero-e-b,
#sc4d:checked ~ * .hero-e-b,
#sc4d1:checked ~ * .hero-e-b,
#sc4d2:checked ~ * .hero-e-b,
#sc4d3:checked ~ * .hero-e-b,
#sc4d4:checked ~ * .hero-e-b,
#sc4d5:checked ~ * .hero-e-b,
#sc4d6:checked ~ * .hero-e-b {
display: none;
}
#sc4b:checked ~ * .hero-w-l,
#sc4d:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-animation: sprite-rev .6s steps(3) 6 forwards;
}
#sc4c:checked ~ * .hero-e-b,
#sc4c1:checked ~ * .hero-e-b,
#sc4c2:checked ~ * .hero-e-b,
#sc4e:checked ~ * .hero-e-b,
#sc4e1:checked ~ * .hero-e-b,
#sc4e2:checked ~ * .hero-e-b {
display: block;
}
#sc4c:checked ~ * .hero-e-l,
#sc4c1:checked ~ * .hero-e-l,
#sc4c2:checked ~ * .hero-e-l,
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
display: none;
}
.dungeon-ts {
position: absolute;
width: 60em;
height: 9.4em;
top: 0;
overflow: hidden;
}
.dungeon-ms {
position: absolute;
margin: 11.1em 0 0 0;
width: 60em;
height: 13.5em;
overflow: hidden;
}
.ts-1, .ts-2, .ts-3, .ts-4 {display: none; position: absolute; width: 19.4em; height: auto;}
.ts-5 {display: none; position: absolute; width: 19.4em; height: auto;}
.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {display: none; position: absolute; width: 17.3em; height: auto;}
.lvl-up {
display: none;
position: absolute;
margin: 0 0 0 35%;
bottom: 0;
z-index: 6;
}
#sc4c:checked ~ * .lvl-up,
#sc4c1:checked ~ * .lvl-up,
#sc4c2:checked ~ * .lvl-up,
#sc4d:checked ~ * .lvl-up,
#sc4e:checked ~ * .lvl-up,
#sc4e1:checked ~ * .lvl-up,
#sc4e2:checked ~ * .lvl-up {
display:block;
}
#sc4b:checked ~ * .rh-wall,
#sc4b:checked ~ * .ts-2,
#sc4b:checked ~ * .ms-2,
#sc4b:checked ~ * .ms-4,
#sc4b:checked ~ * .mimic-cont,
#sc4d:checked ~ * .rh-wall,
#sc4d:checked ~ * .lair,
#sc4d:checked ~ * .ts-2,
#sc4d:checked ~ * .ms-2,
#sc4d:checked ~ * .ms-4 {
-webkit-animation: in-r 4s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4b:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-4,
#sc4b:checked ~ * .ms-1,
#sc4d:checked ~ * .lh-wall,
#sc4d:checked ~ * .ts-3,
#sc4d:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-3,
#sc4d:checked ~ * .lvl-up {
-webkit-animation: out-l 4s forwards;
-webkit-animation-iteration-count: 1;
}
.lh-wall {
display: none;
position: absolute;
margin: 0 0 0 0;
left: 0;
z-index: 5;
}
#sc4c:checked ~ * .lh-wall,
#sc4c1:checked ~ * .lh-wall,
#sc4c2:checked ~ * .lh-wall,
#sc4d:checked ~ * .lh-wall,
#sc4e:checked ~ * .lh-wall,
#sc4e1:checked ~ * .lh-wall,
#sc4e2:checked ~ * .lh-wall {
display:block;
}
.rh-wall {
display: none;
position: absolute;
margin: 0 0 0 0;
right: 0;
z-index: 0;
}
#sc4b:checked ~ * .rh-wall,
#sc4b1:checked ~ * .rh-wall,
#sc4b2:checked ~ * .rh-wall,
#sc4b3:checked ~ * .rh-wall,
#sc4b4:checked ~ * .rh-wall,
#sc4b5:checked ~ * .rh-wall,
#sc4b6:checked ~ * .rh-wall,
#sc4d:checked ~ * .rh-wall,
#sc4d1:checked ~ * .rh-wall,
#sc4d2:checked ~ * .rh-wall,
#sc4d3:checked ~ * .rh-wall,
#sc4d4:checked ~ * .rh-wall,
#sc4d5:checked ~ * .rh-wall,
#sc4d6:checked ~ * .rh-wall,
#sc4e:checked ~ * .rh-wall,
#sc4e1:checked ~ * .rh-wall,
#sc4e2:checked ~ * .rh-wall {
display:block;
}
/* 4a */
#sc4:checked ~ * .dmarkster,
#sc4a1:checked ~ * .dmarkster,
#sc4c:checked ~ * .dmarkster,
#sc4c1:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e:checked ~ * .dmarkster,
#sc4e1:checked ~ * .dmarkster{
display: block;
-webkit-animation: transport-in 2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4a2:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e2:checked ~ * .dmarkster {
display: block;
-webkit-animation: transport-out 2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4:checked ~ * .ts-1,
#sc4a1:checked ~ * .ts-1,
#sc4a2:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-1 {
display:block;
padding: 0 0 0 5%;
}
#sc4:checked ~ * .ts-4,
#sc4a1:checked ~ * .ts-4,
#sc4a2:checked ~ * .ts-4,
#sc4b:checked ~ * .ts-4 {
display:block;
padding: 0 0 0 60%;
}
#sc4:checked ~ * .ms-1,
#sc4a1:checked ~ * .ms-1,
#sc4a2:checked ~ * .ms-1,
#sc4b:checked ~ * .ms-1 {
display:block;
padding: 0 0 0 35%;
}
/* 4b */
.mimic-cont {
display: none;
position: absolute;
width:13em;
height:9em;
margin: 23em 0 0 36em;
z-index: 2;
}
.mimic {
background-size:129.6em 9em;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
background-position: 0 0;
background-repeat: no-repeat;
}
.twinkie {
display: none;
position: absolute;
width:6em;
margin: 26em 0 0 20em;
z-index: 20;
}
#sc4b:checked ~ * .ts-2,
#sc4b1:checked ~ * .ts-2,
#sc4b2:checked ~ * .ts-2,
#sc4b3:checked ~ * .ts-2,
#sc4b4:checked ~ * .ts-2,
#sc4b5:checked ~ * .ts-2,
#sc4b6:checked ~ * .ts-2 {
display:block;
padding: 0 0 0 55%;
}
#sc4b:checked ~ * .ms-2,
#sc4b1:checked ~ * .ms-2,
#sc4b2:checked ~ * .ms-2,
#sc4b3:checked ~ * .ms-2,
#sc4b4:checked ~ * .ms-2,
#sc4b5:checked ~ * .ms-2,
#sc4b6:checked ~ * .ms-2 {
display:block;
}
#sc4b:checked ~ * .ms-4,
#sc4b1:checked ~ * .ms-4,
#sc4b2:checked ~ * .ms-4,
#sc4b3:checked ~ * .ms-4,
#sc4b4:checked ~ * .ms-4,
#sc4b5:checked ~ * .ms-4,
#sc4b6:checked ~ * .ms-4 {
display:block;
padding: 0 0 0 35%;
}
#sc4b:checked ~ * .mimic-cont,
#sc4b1:checked ~ * .mimic-cont,
#sc4b2:checked ~ * .mimic-cont,
#sc4b3:checked ~ * .mimic-cont,
#sc4b4:checked ~ * .mimic-cont,
#sc4b5:checked ~ * .mimic-cont,
#sc4b6:checked ~ * .mimic-cont {
display: block!important;
}
#sc4b:checked ~ * .mimic,
#sc4b1:checked ~ * .mimic {
display: block!important;
width:13em;
height:9.1em;
background-size:129.6em 9em;
background-position: 0 0;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b2:checked ~ * .mimic,
#sc4b3:checked ~ * .mimic,
#sc4b4:checked ~ * .mimic,
#sc4b5:checked ~ * .mimic,
#sc4b6:checked ~ * .mimic {
display: block!important;
width:13em;
height:9.1em;
background-size:129.6em 9em;
background-position: 100% 0;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b3:checked ~ * .hero-e-l,
#sc4b4:checked ~ * .hero-e-l {
-webkit-animation: none;
}
#sc4b1:checked ~ * .hero-w-l,
#sc4b2:checked ~ * .hero-w-l,
#sc4b3:checked ~ * .hero-w-l,
#sc4b4:checked ~ * .hero-w-l {
-webkit-animation: none;
}
#sc4b1:checked ~ * .mimic {
-webkit-animation: boo .6s steps(9) 1 forwards;
}
#sc4b2:checked ~ * .hero-e-l {
-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4b5:checked ~ * .hero-e-l,
#sc4b6:checked ~ * .hero-e-l {
-webkit-animation: jump-f .6s steps(9) 1 forwards;
}
#sc4b4:checked ~ * .twinkie {
display: block;
-webkit-animation: twinkie-in-the-hole .5s 1 forwards;
transition-timing-function: ease-in-out;
}
#sc4b4:checked ~ * .mimic {
-webkit-animation: back-up-mofo 1.0s steps(9) 1 forwards;
}
/* 4c */
#sc4c:checked ~ * .ts-3,
#sc4c1:checked ~ * .ts-3,
#sc4c2:checked ~ * .ts-3,
#sc4d:checked ~ * .ts-3 {
display:block;
padding: 0 0 0 35%;
}
#sc4c:checked ~ * .ms-1,
#sc4c1:checked ~ * .ms-1,
#sc4c2:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-1 {
display:block;
padding: 0 0 0 10%;
}
#sc4c:checked ~ * .ms-3,
#sc4c1:checked ~ * .ms-3,
#sc4c2:checked ~ * .ms-3,
#sc4d:checked ~ * .ms-3 {
display:block;
padding: 0 0 0 45%;
}
#sc4c:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
-webkit-animation: entrance-b 4s;
position: absolute;
}
/* 4d */
#sc4d:checked ~ * .ts-2,
#sc4d1:checked ~ * .ts-2,
#sc4d2:checked ~ * .ts-2,
#sc4d3:checked ~ * .ts-2,
#sc4d4:checked ~ * .ts-2,
#sc4d5:checked ~ * .ts-2,
#sc4d6:checked ~ * .ts-2 {
display:block;
padding: 0 0 0 50%;
}
#sc4d:checked ~ * .ms-2,
#sc4d1:checked ~ * .ms-2,
#sc4d2:checked ~ * .ms-2,
#sc4d3:checked ~ * .ms-2,
#sc4d4:checked ~ * .ms-2,
#sc4d5:checked ~ * .ms-2,
#sc4d6:checked ~ * .ms-2 {
display:block;
padding: 0 0 0 5%;
}
#sc4d:checked ~ * .ms-4,
#sc4d1:checked ~ * .ms-4,
#sc4d2:checked ~ * .ms-4,
#sc4d3:checked ~ * .ms-4,
#sc4d4:checked ~ * .ms-4,
#sc4d5:checked ~ * .ms-4,
#sc4d6:checked ~ * .ms-4 {
display:block;
padding: 0 0 0 35%;
}
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .spidey,
#sc4d4:checked ~ * .spidey,
#sc4d5:checked ~ * .spidey,
#sc4d6:checked ~ * .spidey {
display:block;
}
#sc4d:checked ~ * .lair,
#sc4d1:checked ~ * .lair,
#sc4d2:checked ~ * .lair,
#sc4d3:checked ~ * .lair,
#sc4d4:checked ~ * .lair,
#sc4d5:checked ~ * .lair,
#sc4d6:checked ~ * .lair {
display: block;
}
#sc4d2:checked ~ * .hero-e-l,
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .hero-e-l,
#sc4d1:checked ~ * .hero-w-l,
#sc4d2:checked ~ * .hero-w-l,
#sc4d3:checked ~ * .hero-w-l,
#sc4d5:checked ~ * .hero-w-l,
#sc4d6:checked ~ * .hero-w-l {
-webkit-animation: none;
}
.spidey {
display: none;
position: absolute;
margin: 2em 0 0 14em;
z-index: 11;
}
.lair {
display: none;
position: absolute;
margin: 0;
z-index: 6;
}
.spidey-sword {
display: none;
position: absolute;
margin: 22.5em 0 0 20.5em;
z-index: 11;
}
.web {
display: none;
position: absolute;
margin: 26em 0 0 18em;
z-index: 12;
}
.spidey-shield {
margin: 28em 0 0 21em;
position: absolute;
z-index: 12;
display: none;
}
#sc4d1:checked ~ * .spidey {
display: block;
-webkit-animation: suprise 1.2s linear forwards;
}
#sc4d1:checked ~ * .hero-e-l {
display: block;
-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4d2:checked ~ * .spidey-sword {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: swing .2s linear forwards;
-webkit-animation-delay:.2s;
}
#sc4d2:checked ~ * .web {
display: block;
-webkit-animation: web-sling .4s linear forwards;
}
#sc4d3:checked ~ * .spidey-sword2 {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: swing-two .4s linear forwards;
}
#sc4d3:checked ~ * .spidey {
display: block;
-webkit-animation: take-that 1.5s linear forwards;
}
#sc4d4:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d4:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d5:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .web {
display: block;
-webkit-animation: web-sling-two 3s linear forwards;
}
#sc4d6:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d6:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d6:checked ~ * .spidey-shield {
display: block;
-webkit-animation: shield-me-up .6s linear forwards;
}
/* 4e */
#sc4e:checked ~ * .ts-5,
#sc4e1:checked ~ * .ts-5,
#sc4e2:checked ~ * .ts-5 {
display:block;
padding: 0 0 0 35%;
}
#sc4e:checked ~ * .ms-p1,
#sc4e1:checked ~ * .ms-p1,
#sc4e2:checked ~ * .ms-p1 {
display:block;
padding: 0 0 0 10%;
}
#sc4e:checked ~ * .ms-p2,
#sc4e1:checked ~ * .ms-p2,
#sc4e2:checked ~ * .ms-p2 {
display:block;
padding: 0 0 0 55%;
}
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
-webkit-animation: entrance-b 5s!important;
position: absolute;
}
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
}
#sc4e:checked ~ * .hero-w-l,
#sc4e1:checked ~ * .hero-w-l,
#sc4e2:checked ~ * .hero-w-l {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
-webkit-animation:sprite .6s steps(5) 7 forwards;
}
/* sc 5 STYLES */
.obiwon {
margin: 235px 0 0 170px;
width: 60px;
height: 78px;
position: absolute;
}
#sc5e:checked ~ * .obiwon{
-webkit-animation-delay: .2s;
-webkit-animation: eject 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
transform-origin: 50% 50%;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#sc5f:checked ~ * .hero-e-r{
-webkit-animation-delay: .2s;
-webkit-animation: eject-hero 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
transform-origin: 50% 50%;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
/* sc 6 STYLES */
.boulder {
margin: 40px 0 0 200px;
position: absolute;
z-index: 13;
}
.stone-1 {
background-image:url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-off_54.png');
margin: 255px 0 0 210px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
.stone-2 {
background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-off_55.png');
margin: 255px 0 0 280px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
.stone-3 {
background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-off_56.png');
margin: 255px 0 0 350px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
#sc6e:checked ~ * .hero-w-r {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 70px 44px;
width: 70px;
height: 44px;
}
#sc6b:checked ~ * .stone-1,
#sc6e:checked ~ * .stone-1,
#sc6g:checked ~ * .stone-1,
#sc6h:checked ~ * .stone-1,
#sc6i:checked ~ * .stone-1{
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-on_57.png');
}
#sc6c:checked ~ * .stone-2,
#sc6e:checked ~ * .stone-2,
#sc6f:checked ~ * .stone-2,
#sc6h:checked ~ * .stone-2,
#sc6i:checked ~ * .stone-2 {
background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-on_58.png');
}
#sc6d:checked ~ * .stone-3,
#sc6f:checked ~ * .stone-3,
#sc6g:checked ~ * .stone-3,
#sc6h:checked ~ * .stone-3,
#sc6i:checked ~ * .stone-3 {
background-image:url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-on_59.png');
}
#sc6i:checked ~ * .boulder {
-webkit-animation-delay: .2s;
-webkit-animation: boulder-n-roll 2s forwards;
-webkit-animation-iteration-count: 1;
transform-origin: 50% 50%;
}
#sc6h:checked ~ * .boulder {
-webkit-animation: boulder-n-roll-is-dead 2s forwards;
-webkit-animation-iteration-count: 1;
transform-origin: 50% 50%;
}
#sc6h:checked ~ * .hero-w-b {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 70px 44px;
width: 70px;
height: 44px;
}
/* sc 7 STYLES */
.toady-tongue{
margin: 28em 0 0 28em;
z-index: 11;
position: absolute;
display: none;
}
.toady {
margin: 20em 0 0 33em;
z-index: 5;
position: absolute;
}
.sword1 {
display: none;
position: absolute;
z-index: 11;
}
.sword2 {
display: none;
position: absolute;
z-index: 11;
}
.tree {
margin: 15em 0 0 19em;;
position: absolute;
}
#sc7:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
}
#sc7:checked ~ * .toady,
#sc7c:checked ~ * .toady {
-webkit-transform: scaleX(-1);
}
#sc7b:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:tree .5s linear forwards;
}
#sc7b:checked ~ * .hero-w-l,
#sc7c:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-animation: sprite-rev .6s steps(3) 2 forwards;
}
#sc7c:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:toad .5s linear forwards;
}
#sc7d:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:hero-attack .5s linear forwards;
}
#sc7d:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack .4s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7d:checked ~ * .sword1{
display: block;
margin: 19.5em 0 0 22.5em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:sword-attack .5s linear forwards;
}
#sc7e:checked ~ * .hero-e-l {
margin: 34em 0 0 20em;
-webkit-animation:hero-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .sword2 {
display: block;
margin: 31.7em 0 0 22.3em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:sword-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .toady {
-webkit-animation:toad-turn 1.5s linear forwards;
}
#sc7f:checked ~ * .hero-e-l {
margin: 22em 0 0 20em;
-webkit-animation:dodge .3s linear forwards;
}
#sc7f:checked ~ * .hero-w-l {
-webkit-animation: none;
}
#sc7f:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-tree 1.5s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7f:checked ~ * .tree{
-webkit-animation:roll-tree 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-e-l {
margin: 34em 0 0 20em;
-webkit-animation:runaway 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-transform: scaleX(-1);
-webkit-animation: sprite .6s steps(3) 2 forwards;
}
#sc7g:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack-long 1.5s linear forwards;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:100% 50%;
}
/* sc 8 STYLES */
.warlock {
position: absolute;
margin: 22em 0 0 35em;
}
.warlock img {
width:15em!important;
height:auto;
}
.blast-1 {
display: none;
position: absolute;
margin: 23em 0 0 30em;
z-index: 2;
}
.blast-2 {
display: none;
position: absolute;
margin: 28em 0 0 30em;
z-index: 12;
}
.blast-3 {
display: none;
position: absolute;
margin: 33em 0 0 30em;
z-index: 12;
}
.sword {
display: none;
position: absolute;
margin: 25.4em 0 0 12.2em;
z-index: 11;
}
#shield {
opacity: 0;
margin: 31em 0 0 20em;
position: absolute;
z-index: 12;
}
#sc8:checked ~ * .hero-e-l,
#sc8b:checked ~ * .hero-e-l,
#sc8c:checked ~ * .hero-e-l,
#sc8d:checked ~ * .hero-e-l,
#sc8e:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8g:checked ~ * .hero-e-l,
#sc8i:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l,
#sc8l:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
}
#sc8:checked ~ * .sc,
#sc8b:checked ~ * .sc,
#sc8c:checked ~ * .sc,
#sc8d:checked ~ * .sc,
#sc8e:checked ~ * .sc,
#sc8f:checked ~ * .sc,
#sc8g:checked ~ * .sc,
#sc8h:checked ~ * .sc,
#sc8i:checked ~ * .sc,
#sc8j:checked ~ * .sc,
#sc8k:checked ~ * .sc {
background: #21022d;
}
#sc8l:checked ~ * .sc {
animation: let-there-be-light 1s linear forwards;
}
#sc8c:checked ~ * .blast-2,
#sc8c:checked ~ * .blast-3,
#sc8f:checked ~ * .blast-4,
#sc8f:checked ~ * .blast-6 {
display: block;
-webkit-animation: blast-r-one .8s linear forwards;
}
#sc8c:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l {
-webkit-animation: move-on-up .5s linear forwards;
}
#sc8d:checked ~ * .blast-1,
#sc8d:checked ~ * .blast-5 {
display: block;
-webkit-animation: blast-r-two .8s linear forwards;
}
#sc8d:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation: none;
}
#sc8e:checked ~ * .blast-end {
display: block!important;
-webkit-animation: blast-death .3s linear forwards;
}
#sc8e:checked ~ * .hero-e-l{
-webkit-animation: death .3s linear forwards;
}
#sc8g:checked ~ * .hero-e-l,
#sc8g:checked ~ * .sword {
-webkit-animation: head-on .5s linear forwards;
}
#sc8g:checked ~ * #shield{
-webkit-animation: shield-me-up .3s linear forwards;
-webkit-animation-delay: .2s;
}
#sc8g:checked ~ * .warlock {
-webkit-animation: lets-fight .5s linear forwards;
}
#sc8h:checked ~ * .warlock {
-webkit-animation: lets-fight-clash .5s linear forwards;
}
#sc8h:checked ~ * .hero-e-l{
margin: 28em 0 0 10em;
display: block;
-webkit-animation: head-on .5s linear forwards;
}
#sc8h:checked ~ * .sword{
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: head-on-swing .5s linear forwards;
}
#sc8i:checked ~ * .warlock,
#sc8j:checked ~ * .warlock {
-webkit-animation: doom .5s linear forwards;
z-index: 11;
}
#sc8i:checked ~ * .hero-e-l {
margin: 28em 0 0 5em;
-webkit-animation: none!important;
}
#sc8i:checked ~ * .sword {
display:block;
margin: 25.4em 0 0 7.2em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:spin-out .5s linear forwards;
-webkit-animation-delay:.7s;
}
#sc8i:checked ~ * .hero-w-l{
-webkit-animation: death linear forwards .5s;
-webkit-animation-delay:.5s;
}
#sc8j:checked ~ * .hero-e-l {
margin: 28em 0 0 5em !important;
-webkit-animation-delay:.5s;
}
#sc8k:checked ~ * .sword {
display: block;
margin: 25.4em 0 0 12.2em;
-webkit-transform-origin: 50% 80%;
-webkit-animation: caught-it .35s linear forwards;
}
#sc8k:checked ~ * .hero-e-l{
margin: 28em 0 0 5em !important;
-webkit-animation: none;
}
#sc8k:checked ~ * .warlock {
margin:22em 0 0 13em;
}
#sc8k:checked ~ * .final-blast{
display: block;
margin: 30em 0 0 13em ;
-webkit-animation: final-blast .3s linear forwards;
}
#sc8k:checked ~ * .hero-w-l{
-webkit-animation: poof .3s linear forwards;
}
#sc8l:checked ~ * .hero-e-l {
margin: 28em 0 0 5em;
-webkit-animation: none;
}
#sc8l:checked ~ * .warlock {
margin: 22em 0 0 13em;
-webkit-animation: final-death .7s linear forwards;
}
#sc8l:checked ~ * .sword{
display: block;
margin: 25.5em 0 0 7.5em !important;
-webkit-transform-origin: 50% 80%;
-webkit-animation: final-blow .2s linear forwards;
}
/************* MOBILE CLASSES *************/
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
/* GAME STYLES */
.bg-sc {
width: 100vw;
height: 70vw;
position: relative;
}
.bg-0, .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8{background-size: cover;}
.ground {
width: 100vw!important;
height: 4.2vw;
}
.ui {
width: 96vw!important;
padding: 4vw 2vw;
}
.panel {
width: 90vw;
height: auto;
}
.hero-w-t {
width:16vw;
height:17vw;
background-size:64vw 17vw;
}
.hero-w-r {
width:16vw;
height:17vw;
background-size: 64vw 17vw;
}
.hero-w-b {
width:16vw;
height:17vw;
background-size: 96vw 17vw;
}
.hero-w-l {
width:16vw;
height:17vw;
background-size: 64vw 17vw;
}
.hero-e-t {
margin: 45vw 0 0 43vw;
}
.hero-e-r {
margin: 35vw 0 0 70vw;
}
.hero-e-b {
margin: 45vw 0 0 45vw;
}
.hero-e-l {
margin: 35vw 0 0 20vw;
}
/* sc 0 STYLES */
.logo{
padding:10vw 0 0 0;
width: 90vw;
height: auto;
-webkit-animation: logo 3.5s;
}
.hero-container {
position: absolute;
width: 100vw;
height: 20vw;
bottom: 0!important;
}
.hero-container img{
height: 20vw;
overflow: hidden
}
/* sc 1 STYLES */
#sc1b:checked ~ * .grandolf {
margin: 37vw 0 0 67vw;
}
#sc1b:checked ~ * .dmarkster {
margin: 20vw 0 0 44vw !important;
}
#sc1b:checked ~ * .obiwon {
margin: 42vw 0 0 20vw;
}
#sc1b:checked ~ * .fireworks {
width: 100vw;
height: 70vw;
background-size:100vw 70vw;
}
/* sc 2 STYLES */
.cat {
margin: 25vw 0 0 6vw;
}
.cat img {
width:25vw!important ;
height:auto;
}
#laser {
margin: 40vw 0 0 23vw;
}
#laser img {
width:15vw!important;
height:auto;
}
#poof {
margin: 26vw 0 0 8vw;
width:22vw!important;
height:auto;
}
#spam {
margin: 37vw 0 0 69vw;
}
#spam img {
width:10vw!important;
height:auto;
}
#sc2c:checked ~ * .hero-w-r {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 20vw 13vw;
width:20vw;
height:13vw;
}
#sc2c:checked ~ * .hero-e-r {
margin: 39vw 0 0 70vw!important;
}
/* sc 3 STYLES */
.grandolf {
margin: 28vw 0 0 60vw;
}
.grandolf img {
width: 15vw!important;
height: auto;
}
/* sc 4 STYLES */
.dungeon-ts {
width: 100vw;
height: 15.5vw;
top: 0;
}
.dungeon-ms {
margin: 18vw 0 0 0;
width: 100vw;
height: 23.2vw;
}
.lh-wall {
width:12vw!important;
}
.lh-wall img {
width:12vw!important;
}
.rh-wall {
width:12vw!important;
}
.rh-wall img {
width:12vw!important;
}
.lvl-up {
width:35vw!important;
}
.lvl-up img {
width:35vw!important;
height: auto;
}
.dmarkster {
margin: 22vw 0 0 46vw;
}
.dmarkster img {
width: 13vw!important;
height: auto;
}
.mimic-cont {
width:28.9vw!important;
height:20vw!important;
margin: 32vw 0 0 55vw!important;
}
.mimic {
width:28.9vw!important;
height:20vw!important;
background-size:289vw 20vw!important;
background-position: 0 0;
}
.mimic-cont {
display: none;
position: absolute;
height:90px;
width:130px;
margin: 230px 0 0 360px;
z-index: 2;
}
.mimic {
background-size:1296px 90px;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
background-position: 0 0;
background-repeat: no-repeat;
}
.twinkie {
margin: 40vw 0 0 20vw;
}
.twinkie img {
width: 12vw!important;
height: auto;
}
.spidey {
margin: -40vw 0 0 15vw;
}
.lair img {
width: 100vw!important;
height: auto;
}
.spidey img {
width: 35vw!important;
height: auto;
}
.ts-1, .ts-2, .ts-3, .ts-4 {width:31vw!important; height:15.5vw;}
.ts-5 {width:15.5vw!important; height: 15.5vw;}
.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {width: 33vw!important;height: 23.2vw;}
.ts-1 img, .ts-2 img, .ts-3 img, .ts-4 img {width:31vw!important; height:15.5vw;}
.ts-5 img {width: 15.5vw!important; height: 15.5vw!important;}
.ms-1 img, .ms-2 img, .ms-3 img, .ms-4 img, .ms-p1 img, .ms-p2 img {width: 33vw!important;height: 23.2vw;}
#sc4c:checked ~ * .hero-e-l {
margin: 50vw 0 0 46vw;
}
#sc4c:checked ~ * .hero-w-l {
width:14.1vw;
height:15vw;
background-size: 84.6vw 15vw;
}
#sc4d:checked ~ * .hero-e-l,
#sc4d1:checked ~ * .hero-e-l,
#sc4d2:checked ~ * .hero-e-l,
#sc4d3:checked ~ * .hero-e-l,
#sc4d4:checked ~ * .hero-e-l,
#sc4d5:checked ~ * .hero-e-l,
#sc4d6:checked ~ * .hero-e-l {
margin: 35vw 0 0 20vw;
}
#sc4e:checked ~ * .hero-e-l {
margin: 50vw 0 0 46vw;
}
#sc4e:checked ~ * .hero-w-l {
width:14.1vw;
height:15vw;
background-size: 84.6vw 15vw;
}
.spidey-sword {
margin: 31vw 0 0 27vw;
}
.spidey-sword img {
width: 6vw !important;
height: auto!important;
}
.web {
margin: 35vw 0 0 20vw;
}
.web img {
width: 15vw !important;
height: auto!important;
}
.spidey-shield {
margin: 43vw 0 0 28vw;
position: absolute;
z-index: 12;
display: none;
}
.spidey-shield img {
width: 8vw !important;
height: auto!important;
}
#sc4d4:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
#sc4d5:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
#sc4d6:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
@-webkit-keyframes gotcha-m {
0%, 100% { transform: translateY(-200vw);}
20% { transform: translateY(10vw);}
}
/* sc 5 STYLES */
.obiwon {
margin: 31vw 0 0 10vw;
}
.obiwon img {
width:16vw!important;
height:auto;
}
/* sc 6 STYLES */
.boulder {
margin: 8vw 0 0 35vw;
}
.boulder img {
width:30vw!important;
height:auto;
}
.stone-1 {
margin: 40vw 0 0 32vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
.stone-2 {
margin: 40vw 0 0 47vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
.stone-3 {
margin: 40vw 0 0 62vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
/* sc 7 STYLES */
#sc7:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
}
.toady-tongue{
margin: 42vw 0 0 48vw!important;
}
.toady-tongue img{
width:20vw!important;
height:auto;
}
.toady {
margin: 30vw 0 0 55vw!important;
}
.toady img {
width:45vw!important;
height:auto;
}
.sword1 img {
width:6vw!important;
height:auto;
}
.sword2 img {
width:6vw!important;
height:auto;
}
.tree {
margin: 26.5vw 0 0 32vw!important;
}
.tree img {
width:35vw!important;
height:auto;
}
#sc7b:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
-webkit-animation:tree-m .5s linear forwards!important;
}
#sc7c:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
-webkit-animation:toad-m .5s linear forwards!important;
}
@-webkit-keyframes tree-m {
0% {transform: translate(0vw,0vw)}
100% {transform: translate(15vw,-8vw)}
}
@-webkit-keyframes toad-m {
0% {transform: translate(0vw,0vw)}
100% {transform: translate(15vw,8vw)}
}
#sc7d:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw!important;
-webkit-animation:hero-attack-m .5s linear forwards!important;
}
#sc7d:checked ~ * .toady-tongue{
margin: 42vw 0 0 48vw!important;
-webkit-animation:toad-attack-m .5s linear forwards!important;
}
#sc7d:checked ~ * .sword1{
margin: 27.5vw 0 0 30vw!important;
-webkit-animation:sword-attack-m .5s linear forwards!important;
}
@-webkit-keyframes hero-attack-m {
0% {transform: translate(15vw,-8vw);}
90% {opacity:1;transform: translate(35vw,0px);}
98% {opacity:.8;}
100% { opacity:0; transform: translate(40vw,0px);}
}
@-webkit-keyframes toad-attack-m {
0%, 100% {opacity:0; transform: scale(0,1);}
5%, 90% {opacity:1; transform: scale(.2,1);}
80% {opacity:1; transform: scale(1,1);}
}
@-webkit-keyframes sword-attack-m {
0% {transform: translate(0,0);}
90% {opacity:1; transform: translate(19vw,8vw);}
98% {opacity:.8;}
100% {opacity:0; transform: translate(25vw,8vw);}
}
#sc7e:checked ~ * .hero-e-l {
margin: 48vw 0 0 25vw!important;
-webkit-animation:hero-attack-two-m 1.5s linear forwards!important;
}
#sc7e:checked ~ * .sword2 {
margin: 43.5vw 0 0 31.5vw!important;
-webkit-animation:sword-attack-two-m 1.5s linear forwards!important;
}
@-webkit-keyframes hero-attack-two-m {
0% {transform: translate(0,0)}
10%,90% {opacity:1;transform: translate(18vw,-8vw)}
100% {opacity:1;transform: translate(-8vw,-18vw)}
}
@-webkit-keyframes sword-attack-two-m {
0% {transform: translate(0,0) rotate(0deg)}
10% {transform: translate(18vw,-8vw) rotate(0deg)}
12% {transform: translate(18vw,-8vw) rotate(-60deg)}
20% {transform: translate(18vw,-8vw) rotate(80deg)}
30% {transform: translate(18vw,-8vw) rotate(0deg)}
90% {transform: translate(18vw,-8vw) rotate(0deg)}
100% {transform: translate(-8vw,-18vw) rotate(0deg)}
}
#sc7f:checked ~ * .hero-e-l {
margin: 32vw 0 0 25vw !important;
-webkit-animation:dodge .3s linear forwards;
}
#sc7f:checked ~ * .toady-tongue{
-webkit-animation:toad-tree-m 1.5s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7f:checked ~ * .tree{
-webkit-animation:roll-tree-m 1.5s linear forwards;
}
@-webkit-keyframes toad-tree-m {
0% {opacity:0; transform: rotate(20deg) scale(0,1);}
10% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
90% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
100% {opacity:1; transform: rotate(20deg) scale(.8,1);}
}
@-webkit-keyframes roll-tree-m {
0%, 90% {transform: translate(0px,0px)}
100% {transform: translate(14vw, 3vw)}
}
#sc7g:checked ~ * .hero-e-l {
margin: 48vw 0 0 25vw;
-webkit-animation:runaway-m 1.5s linear forwards;
}
#sc7g:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack-long-m 1.5s linear forwards;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:100% 50%;
}
@-webkit-keyframes toad-attack-long-m {
0%, 40% {opacity:0; transform: scale(0,1);}
50%, 70% {opacity:1; transform: scale(3,1);}
80% {opacity:1; transform: scale(.5,1);}
98% {opacity:1; transform: scale(0,1);}
100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes runaway-m {
0% {transform: translate(0px,0px)}
50%, 70% {transform: translate(-25vw,-8vw)}
80% {opacity:1; transform: translate(25vw,-8vw)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(40vw,-8vw)}
}
/* sc 8 STYLES */
.warlock {
margin:32vw 0 0 60vw;
}
.warlock img {
width:30vw!important;
height:auto;
}
.blast {
width: 10vw!important;
height: auto;
}
.blast-1 {
margin: 35vw 0 0 50vw;
}
.blast-2 {
margin: 45vw 0 0 50vw;
}
.blast-3 {
margin: 55vw 0 0 50vw;
}
.sword {
margin: 40vw 0 0 15vw!important;
z-index: 12;
}
.sword img {
width: 6vw!important;
height: auto!important;
}
#shield {
margin: 52vw 0 0 38vw;
z-index: 12;
}
#sc8:checked ~ * .hero-e-l,
#sc8b:checked ~ * .hero-e-l,
#sc8c:checked ~ * .hero-e-l,
#sc8d:checked ~ * .hero-e-l,
#sc8e:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8g:checked ~ * .hero-e-l,
#sc8i:checked ~ * .hero-e-l,
#sc8k:checked ~ * .hero-e-l,
#sc8l:checked ~ * .hero-e-l {
margin: 45vw 0 0 15vw!important;
}
#sc8i:checked ~ * .hero-e-l {
margin: 35vw 0 0 5vw!important;
-webkit-animation: none!important;
}
#sc8c:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l {
-webkit-animation: move-on-up-m .5s linear forwards!important;
}
@-webkit-keyframes move-on-up-m {
0% { transform: translateY(0vw);}
50% { transform: translateY(-15vw);}
100% { transform: translateY(0vw);}
}
#sc8g:checked ~ * .hero-e-l,
#sc8g:checked ~ * .sword {
-webkit-animation: head-on-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-m {
0% { transform: translate(0vw,0vw);}
40%, 80% { transform: translate(15vw,0vw);}
100% { transform: translate(-5vw,0vw);}
}
#sc8g:checked ~ * .warlock {
-webkit-animation: lets-fight-m .3s linear forwards!important;
}
@-webkit-keyframes lets-fight-m {
0% { transform: translateX(0vw);}
100% { transform: translateX(-16vw);}
}
#sc8h:checked ~ * .warlock {
-webkit-animation: lets-fight-clash-m .5s linear forwards!important;
}
@-webkit-keyframes lets-fight-clash-m {
0% { transform: translateX(0vw);}
40%, 80% { transform: translateX(-16vw);}
100% { transform: translateX(-40vw);}
}
#sc8h:checked ~ * .hero-e-l{
margin: 45vw 0 0 10vw!important;;
display: block;
-webkit-animation: head-on-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-m {
0% { transform: translate(0vw,0vw);}
40%, 80% { transform: translate(20vw,0vw);}
100% { transform: translate(-5vw,0vw);}
}
#sc8h:checked ~ * .sword{
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: head-on-swing-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-swing-m {
0% { transform: translate(0vw,0vw) rotate(0deg);}
40%, 80% { transform: translate(20vw,0vw) rotate(40deg);}
100% { transform: translate(-5vw,0vw) rotate(0deg);}
}
#sc8i:checked ~ * .sword {
-webkit-animation-delay:.4s!important;
}
@-webkit-keyframes come-get-some-m {
0% { transform: translateX(0vw);}
40% { transform: translateX(16vw);}
80% { transform: translateX(16vw);}
100% { transform: translateX(-10vw);}
}
#sc8i:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
}
#sc8i:checked ~ * .warlock,
#sc8j:checked ~ * .warlock {
-webkit-animation: doom-m .3s linear forwards!important;
}
@-webkit-keyframes doom-m {
0% { transform: translateX(-16vw);}
100% { transform: translateX(-40vw);}
}
#sc8j:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
-webkit-animation-delay:.5s;
}
#sc8k:checked ~ * .sword {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: caught-it .35s linear forwards;
}
#sc8k:checked ~ * .hero-e-l{
margin: 45vw 0 0 10vw!important;
-webkit-animation: none;
}
#sc8k:checked ~ * .warlock,
#sc8l:checked ~ * .warlock {
margin:32vw 0 0 20vw!important;
}
#sc8k:checked ~ * .final-blast{
margin: 50vw 0 0 15vw!important;
}
#sc8k:checked ~ * .hero-w-l{
-webkit-animation: poof .3s linear forwards;
}
#sc8l:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
}
#sc8l:checked ~ * .sword{
display: block;
margin: 40vw 0 0 15vw!important;
}
}
/************* -webkit-animations *************/
/* Generic -webkit-animations */
@-webkit-keyframes fade-in {
0% {opacity: 0; visibility: hidden; overflow: hidden;}
100% {opacity: 1; visibility: visible; overflow: visible;}
}
@-webkit-keyframes entrance-t {
0% {opacity: 0; transform: translateY(-15em);}
10% {opacity: 1; }
100% {transform: translateY(0)}
}
@-webkit-keyframes entrance-r {
0% {transform: translateX(260px);}
100% {transform: translateX(0);}
}
@-webkit-keyframes entrance-b {
0% {transform: translateY(285px);}
100% {transform: translateY(0);}
}
@-webkit-keyframes entrance-l {
0% {transform: translateX(-260px);}
100% {transform: translateX(0);}
}
@-webkit-keyframes sprite {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
@-webkit-keyframes sprite-rev {
0% {background-position-x: 1000%;}
100% {background-position-x: 0%;}
}
/* sc 0 -webkit-animations */
@-webkit-keyframes logo {
0% {opacity: 0;transform: translateY(-50px);}
100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes blink {
0% {opacity: 1.0;}
50% {opacity: 0.0;}
100% {opacity: 1.0;}
}
/* sc 1 -webkit-animations */
@keyframes snow{
0%{transform:translate(0,0);opacity:0;}
10%, 90% {opacity:1;}
50%{transform:translate(-100px,500px);opacity:.2;}
100%{transform:translate(0,500px);opacity:0;}
}
@-webkit-keyframes jump-for-joy {
0%,100% {transform: translateY(0px);}
50% {transform: translateY(-1.5em);}
}
/* sc 2 -webkit-animations */
@-webkit-keyframes shot-fired {
0%, 100% {opacity:0;}
5%, 95% {opacity:1;}
6% {transform:scale(0.2,0.3)}
10% {transform:scale(1,1);}
50% {transform:translate(115px,0px);}
}
@-webkit-keyframes target-accuired {
0%, 100% {opacity:0;}
5%, 99% {opacity:1;}
6% {transform:scale(0.2,0.3);}
10% {transform:scale(1,1);}
98% {transform:translate(115px,0px);}
}
@-webkit-keyframes shield-me-up {
0%, 100% {opacity:0;}
1%, 99% {opacity:1;}
2% {transform:scaleX(0.1);}
5% {transform:scaleX(1);}
97% {transform:scaleX(1);}
98% {transform:scaleX(0.1);}
}
@-webkit-keyframes smoke-the-cat {
0%, 4%, 8%, 12% {opacity: 1;}
2%, 6%, 10% {opacity: .7;}
20%, 100% {opacity: 0;}
}
/* sc 3 -webkit-animations */
@-webkit-keyframes body-shot {
0% { transform: translateX(0px);}
100% { transform: translateX(-700px);}
}
/* sc 4 -webkit-animations */
@-webkit-keyframes transport-in {
0%, 5%, 15%, 25%, 100% {opacity: 1;}
1%, 10%, 20% {opacity: 0;}
}
@-webkit-keyframes transport-out {
0%, 10%, 20% {opacity: 1;}
5%, 15%, 25%, 100% {opacity: 0;}
}
@-webkit-keyframes out-l {
0% { transform: translateX(0px);}
100% { transform: translateX(-700px);}
}
@-webkit-keyframes in-r {
0% { transform: translateX(700px);}
100% { transform: translateX(0px);}
}
@-webkit-keyframes boo {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
@-webkit-keyframes back-up-mofo {
0% {background-position-x: 100%;}
75% {background-position-x: 100%;}
100% {background-position-x: 0%;}
}
@-webkit-keyframes jump-f {
0% { opacity:1; transform: translate(0vw, 0vw);}
45% { opacity:1; transform: translate(70px, -70px);}
90% { opacity:1; transform: translate(140px, 0vw);}
100% { opacity:0; transform: translate(140px, 0vw);}
}
@-webkit-keyframes jump-b {
0%, 100% { transform: translateX(0px);}
50% { transform: translateX(-30px);}
}
@-webkit-keyframes twinkie-in-the-hole {
0% { opacity:1; transform: translate(0px, 0px) rotate(0deg);}
45% { opacity:1; transform: translate(70px, -70px) rotate(360deg);}
90% { opacity:1; transform: translate(140px, 0px) rotate(720deg);}
100% { opacity:0; transform: translate(140px, 0px) rotate(720deg);}
}
@-webkit-keyframes gotcha {
0%, 100% { transform: translateY(-700px);}
20% { transform: translateY(100px);}
}
@-webkit-keyframes take-that {
0% { transform: translateY(0px);}
15% { transform: translateY(80px);}
30% { transform: translateY(0px);}
100% { transform: translateY(-700px);}
}
@-webkit-keyframes suprise {
0% {-webkit-transform: translateY(-500px);}
20% {-webkit-transform: translateY(30px);}
50%, 60%, 80%, 100% {-webkit-transform: translateY(0px);}
40% {-webkit-transform: translateY(-60px);}
}
@-webkit-keyframes bites-the-dust {
0%, 20% { transform: translate(0px, 0px);}
100% { transform: translate(0px, -700px);}
}
@-webkit-keyframes swing {
0% { transform: rotate(-60deg);}
100% { transform: rotate(80deg);}
}
@-webkit-keyframes swing-two {
0% { transform: rotate(-60deg);}
100% { transform: rotate(80deg);}
}
@-webkit-keyframes web-sling {
0% { opacity: 1; transform: translate(2em, -8em);}
75%, 85%, 95% {opacity: 1;}
80%, 90%, 100% {opacity: 0;}
100% { opacity: 0; transform: translate(0em, 0em);}
}
@-webkit-keyframes web-sling-two {
0% { transform: translate(2em, -8em);}
10%, 20% { transform: translate(0em, 0em);}
100% { transform: translate(0px, -700px);}
}
/* sc 5 -webkit-animations */
@-webkit-keyframes eject {
0% {transform: translate(0px,0px) rotate(0deg);}
30% {transform: translate(60px,-150px) rotate(90deg);}
100% {transform: translate(120px,300px) rotate(720deg);}
}
@-webkit-keyframes eject-hero {
0% {transform: translate(0px,0px) rotate(0deg);}
30% {transform: translate(-60px,-150px) rotate(90deg);}
100% {transform: translate(-120px,300px) rotate(720deg);}
}
/* sc 6 -webkit-animations */
@-webkit-keyframes boulder-n-roll {
0%, 10% {transform: translate(0px,0px) rotate(0deg);}
2%, 6% {transform: translate(5px,0px) rotate(0deg);}
4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
12%, 16%, 20% {transform: translate(10px,0px) rotate(0deg);}
14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
100% {transform: translate(480px,400px) rotate(720deg);}
}
@-webkit-keyframes boulder-n-roll-is-dead {
0%, 10% {transform: translate(0px,0px) rotate(0deg);}
2%, 6% {transform: translate(5px,0px) rotate(0deg);}
4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
12%, 16%, 20% {transform: translate(10px,0px) rotate(0deg);}
14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
100% {transform: translate(0px,400px) rotate(720deg);}
}
/* sc 7 -webkit-animations */
@-webkit-keyframes tree {
0% {transform: translate(0px,0px)}
100% {transform: translate(100px,-60px)}
}
@-webkit-keyframes toad {
0% {transform: translate(0px,0px)}
100% {transform: translate(100px,60px)}
}
@-webkit-keyframes dodge {
0% { transform: translateX(0px);}
100% { transform: translateX(-50px);}
}
@-webkit-keyframes hero-attack {
0% {transform: translate(100px,-60px)}
90% {opacity:1;transform: translate(180px,0px)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(270px,0px)}
}
@-webkit-keyframes hero-attack-two {
0% {transform: translate(0px,0px)}
10% {opacity:1;transform: translate(100px,-60px)}
90% {opacity:1;transform: translate(100px,-60px)}
100% {opacity:1;transform: translate(0px,-120px)}
}
@-webkit-keyframes sword-attack {
0% {transform: translate(0px,0px)}
90% {opacity:1;transform: translate(80px,60px)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(170px,60px)}
}
@-webkit-keyframes sword-attack-two {
0% {transform: translate(0px,0px) rotate(0deg)}
10% {transform: translate(100px,-60px) rotate(0deg)}
12% {transform: translate(100px,-60px) rotate(-60deg)}
20% {transform: translate(100px,-60px) rotate(80deg)}
30% {transform: translate(100px,-60px) rotate(0deg)}
90% {transform: translate(100px,-60px) rotate(0deg)}
100% {transform: translate(0px,-120px) rotate(0deg)}
}
@-webkit-keyframes toad-turn {
0%, 44% {transform: scaleX(-1)}
45%, 100% {transform: scaleX(1)}
}
@-webkit-keyframes toad-attack {
0% {opacity:0; transform: scale(0,1);}
5% {opacity:1; transform: scale(.2,1);}
80% {opacity:1; transform: scale(1.5,1);}
90% {opacity:1; transform: scale(.5,1);}
100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes toad-tree {
0% {opacity:0; transform: rotate(20deg) scale(0,1);}
10% {opacity:1; transform: rotate(20deg) scale(2,1);}
90% {opacity:1; transform: rotate(20deg) scale(2,1);}
100% {opacity:1; transform: rotate(20deg) scale(1,1);}
}
@-webkit-keyframes roll-tree {
0%, 90% {transform: translate(0px,0px)}
100% {tr
- 이전글곤충위에 마우스를 올리면 애니가 멋지게 구현됩니다. 18.06.13
- 다음글Round 3D의 멋진 데모... 18.06.13