Skip to content

Instantly share code, notes, and snippets.

@itsjustkarissa
Created April 25, 2012 06:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save itsjustkarissa/2487225 to your computer and use it in GitHub Desktop.
Save itsjustkarissa/2487225 to your computer and use it in GitHub Desktop.
Whale vs. Squid
/**
* Whale vs. Squid
*/
}
body {
margin: 10px;
}
#part-1 {
overflow: hidden;
position: relative;
background: #adf4ff;
height: 500px;
width: 946px;
}
#part-2 {
top: 20px;
position: relative;
-webkit-animation: rocking 5s linear infinite;
}
@-webkit-keyframes rocking {
0% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(-2deg); }
100% { -webkit-transform: rotate(2deg); } /*attack*/
}
#whale { /*whale--add rocking motion*/
position: relative;
top: 40px;
left: 10px;
-webkit-transform: rotate(-20deg);
}
.squid00 {
position: absolute;
top: 249px;
left: 340px;
background: transparent;
height: 50px;
width: 100px;
border-radius: 200px 170px 10px 10px;
box-shadow: 20px -18px 0px 0px #d86565; /*squid arm 1*/
}
.squid00:before {
content:"";
position: absolute;
top: -13px;
left: 10px;
background: #d86565;
height: 20px;
width: 50px;
border-radius: 100px 20px 20px 20px;
-webkit-transform: rotate(-10deg);
}
#attack {
position: relative;
top: -4px;
left: -90px;
}
.squid01,
.squid01:before,
.squid01:after {
position: absolute;
top: 120px;
left: 450px;
background: transparent;
height: 100px;
width: 102px;
border-radius: 100%;
box-shadow: 14px -12px -2px -4px #d86565,
inset -16px 14px 0px -14px #ad4e4e; /*underside*/
-webkit-animation: attack 2.7s linear infinite;
}
@-webkit-keyframes attack {
0% { -webkit-transform: rotate(20deg);
-webkit-transform-origin: 100% 0%; }
50% { -webkit-transform: rotate(30deg);
-webkit-transform-origin: 100% 50%; }
100% { -webkit-transform: rotate(20deg);
-webkit-transform-origin: 100% 0%; } /*attack*/
}
.squid01:before {
content:"";
top: -38px;
left: 106px;
height: 190px;
width: 122px;
box-shadow: inset -2px -18px 0px -10px #dd8080,
-20px 24px 0px -10px #d86565,
-26px 30px 0px -14px #ad4e4e; /*underside*/
}
.squid01:after {
content:"";
top: 2px;
left: 60px;
background: #ad4e4e;
border-radius: 100%;
height: 5px;
width: 5px;
box-shadow: -8px -2px 0px -1px #ad4e4e,
8px 5px 0px 0px #ad4e4e,
16px 12px 0px 0px #ad4e4e,
24px 20px 0px 0px #ad4e4e,
30px 28px 0px 1px #ad4e4e,
36px 40px 0px 0px #ad4e4e, /*tentacles (t)*/
32px 90px 0px -1px #ad4e4e,
32px 100px 0px 0px #ad4e4e,
34px 110px 0px 0px #ad4e4e,
36px 120px 0px 1px #ad4e4e,
41px 130px 0px 1px #ad4e4e,
46px 140px 0px 1px #ad4e4e,
54px 150px 0px 0px #ad4e4e; /*tentacles (b)*/
}
.whale-1 { /*WHALE*/
position: absolute;
top: 100px;
left: 200px;
background: #3f5187;
height: 140px;
width: 250px;
border-radius: 150px 150px 70px 100px;
box-shadow: inset -10px 5px 0px -7px #4f6199; /*head*/
-webkit-transform: rotate(-25deg);
}
.whale-1:before {
content:"";
position: absolute;
top: 140px;
left: 200px;
background: white;
height: 8px;
width: 14px;
border-radius: 0 0 50px 50px;
box-shadow: -01px 1px 0px 0px #999,
-18px 0px 0px 0px white,
-18px 1px 0px 0px #999,
-36px 0px 0px 0px white,
-36px 1px 0px 0px #999,
-54px 0px 0px 0px white,
-54px 1px 0px 0px #999,
-72px 0px 0px 0px white,
-72px 1px 0px 0px #999,
-90px 0px 0px 0px white,
-90px 1px 0px 0px #999,
-108px 0px 0px 0px white,
-108px 1px 0px 0px #999 ; /*top teeth*/
}
.whale-2,
.whale-2:before,
.whale-2:after {
position: absolute;
top: 208px;
left: 240px;
background: #3f5187;
height: 70px;
width: 70px;
border-radius: 100%;
-webkit-animation: jaw 1.8s linear infinite;
}
@-webkit-keyframes jaw {
0% { -webkit-transform: rotate(-3deg); }
50% { -webkit-transform: rotate(-6deg); }
100% { -webkit-transform: rotate(-3deg); } /*jaw*/
}
.whale-2:before {
content:"";
top: 40px;
left: 38px;
background: #3f5187;
height: 30px;
width: 160px;
border-radius: 0px 50px 300px 0px;
}
.whale-2:after {
content:"";
top: 36px;
left: 180px;
background: white;
height: 4px;
width: 10px;
border-radius: 50px 50px 0 0;
box-shadow: -01px -1px 0px 0px #999,
-18px 0px 0px 0px white,
-18px -1px 0px 0px #999,
-36px 0px 0px 0px white,
-36px -1px 0px 0px #999,
-54px 0px 0px 0px white,
-54px -1px 0px 0px #999,
-72px 0px 0px 0px white,
-72px -1px 0px 0px #999 ; /*bottom teeth*/
}
.squid02,
.squid02:before {
position: absolute;
top: 238px;
left: 348px;
background: transparent;
border-radius: 100%;
position: absolute;
height: 50px;
width: 50px;
box-shadow: -12px -2px -1px 0px #d86565,
-16px -4px -1px -2px #ef9797,
inset 8px 2px 0px -4px #994c4c; /*underside#933636*/
-webkit-animation: tentacle-2 1.8s linear infinite;
}
@-webkit-keyframes tentacle-2 {
0% { -webkit-transform: rotate(-2deg);
-webkit-transform-origin: 100% 0%; }
50% { -webkit-transform: rotate(6deg);
-webkit-transform-origin: 100% 0%; }
100% { -webkit-transform: rotate(-2deg);
-webkit-transform-origin: 100% 0%; } /*tentacle*/
}
.squid02:before {
content:"";
top: 3px;
left: 12px;
background: #ad4e4e;
height: 5px;
width: 5px;
box-shadow: -8px 8px -1px 0px #ad4e4e,
-11px 18px 0px -1px #ad4e4e,
-10px 28px 0px -1px #ad4e4e;
}
.whale-3,
.whale-4 {
position: absolute;
top: 230px;
left: 300px;
background: #222;
height: 22px;
width: 22px;
border-radius: 100%;
box-shadow: 1px 1px 0px 1px #2f3a5b, /*eyeshadow*/
66px -142px -1px -3px #4f6199,
80px -140px -2px -6px #6b779b; /*shine*/
}
.whale-4 {
box-shadow: inset -4px 4px 0px 9px white;
-webkit-animation: eyeball 4s linear infinite;
}
@-webkit-keyframes eyeball {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(90deg); }
100% { -webkit-transform: rotate(0deg); } /*eyeball*/
}
.whale-5 {
position: absolute;
top: 38px;
left: 136px;
background: transparent;
height: 118px;
width: 118px;
border-radius: 100%;
box-shadow: 20px 80px 0px -10px #3f5187; /*tail base*/
-webkit-animation: tail 2.8s linear infinite;
}
@-webkit-keyframes tail {
0% { -webkit-transform: rotate(2deg);
-webkit-transform-origin: 100% 50%;}
50% { -webkit-transform: rotate(-2deg);
-webkit-transform-origin: 100% 0%; }
100% { -webkit-transform: rotate(2deg);
-webkit-transform-origin: 100% 50%;}
}
.whale-5:before {
content:"";
position: absolute;
top: 30px;
left: -50px;
background: transparent;
height: 90px;
width: 200px;
border-color: #3f5187;
border-style: solid;
border-width: 0px 0px 100px 20px;
border-radius: 50px 50px 200px 300px;
box-shadow: inset 10px -6px 0px -4px #3f5187 ; /*smoother*/
}
.whale-5:after,
.whale-6 {
position: absolute;
top: 10px;
left: -100px;
height: 40px;
width: 60px;
border-radius: 10px 800px;
}
.whale-5:after {
content:"";
background: #3f5187;
box-shadow: 0px -2px 0px 0px #a4b2dd,
-4px -1px 0px 0px #2f3a5b,
34px 63px 0px -16px #3f5187,
40px 66px 0px -18px #3f5187,
40px 72px 0px -15px #3f5187,
100px 90px 0px -15px #3f5187,
60px 90px 0px 0px #3f5187,
90px 102px 0px 0px #3f5187; /*tail cover-up*/
}
.whale-6 {
top: 46px;
left: 90px;
background: #4f6199;
box-shadow: 0px -2px 0px 0px #a4b2dd,
inset -10px -10px -1px -5px #3f5187,
inset -30px -15px 0px 15px #3f5187;
-webkit-animation: tail-fin 2.8s linear infinite; /*tail single*/
}
@-webkit-keyframes tail-fin {
0% { -webkit-transform: rotatey(180deg) rotate(-4deg); }
50% { -webkit-transform: rotatey(180deg) rotate(4deg) scale(1.05); }
100% { -webkit-transform: rotatey(180deg) rotate(-4deg); } /*tail*/
}
.squid03,
.squid03:before {
position: absolute;
top: 124px;
left: 206px;
background: transparent;
height: 146px;
width: 146px;
border-radius: 70px 100px;
box-shadow: -4px 10px 0px -5px #994c4c,
-5px 10px 0px -5px #933636, /*under*/
-14px 30px 0px 0px #d86565, /*armwrap*/
inset 5px -10px 0px 0px #3f5187; /*whale cover*/
-webkit-transform: rotate(56deg);
}
.squid03:before {
content:"";
top: 100px;
left: 8px;
background: #994c4c;
height: 6px;
width: 6px;
border-radius: 100%;
box-shadow: -4px 10px 0px 0px #994c4c,
-8px 20px 0px 0px #994c4c,
-8px 30px 0px 0px #994c4c,
-10px 42px 0px 0px #994c4c,
-8px 56px 0px 1px #994c4c,
-3px 70px 0px 1px #994c4c,
6px 84px 0px 2px #994c4c;
-webkit-transform: rotate(-56deg);
}
.whale-7 {
position: absolute;
top: 238px;
left: 210px;
background: #425284;
height: 40px;
width: 60px;
border-radius: 20px 200px 10px 200px;
box-shadow: -1px 0px 0px 1px #2f3a5b,
inset 0px 3px 0px -2px #a4b2dd;
-webkit-animation: fin 2.4s linear infinite;
}
@-webkit-keyframes fin {
0% { -webkit-transform: rotate(-10deg);
-webkit-transform-origin: 100% 100%; }
50% { -webkit-transform: rotate(27deg);
-webkit-transform-origin: 100% 100%; }
100% { -webkit-transform: rotate(-10deg);
-webkit-transform-origin: 100% 100%; } /*fin*/
}
#squid { /*squid*/
position: relative;
top: -10px;
left: 140px;
-webkit-transform: rotate(35deg);
}
.squid-1 {
position: absolute;
top: 100px;
left: 600px;
background: #d86565;
height: 180px;
width: 90px;
border-radius: 100px 10px 80px 20px;
}
.squid-1:before,
.squid-1:after {
content: "";
position: absolute;
top: -18px;
left: 00px;
width: 90px;
height: 90px;
background: #d86565;
border-radius: 100px 10px 100px 100px;
-webkit-transform: rotate(-30deg);
-webkit-transform-origin: 100% 0;
}
.squid-1:after {
top:170px;
left: 16px;
-webkit-transform: rotate(40deg);
-webkit-transform-orgin: 100% 100%;
}
.squid-2,
.squid-2:before,
.squid-2:after {
position: absolute;
top: 158px;
left: 670px;
background: transparent;
height: 100px;
width: 100px;
border-radius: 100%;
box-shadow: 0px 16px -4px 12px #d86565,
inset -28px -8px 0px -20px #d86565,
6px 18px -2px 10px #ad4e4e; /*underside*/
-webkit-animation: tentacle-1 2s linear infinite;
}
@-webkit-keyframes tentacle-1 {
0% { -webkit-transform: rotate(-12deg);
-webkit-transform-origin: 0% 100%; }
50% { -webkit-transform: rotate(10deg);
-webkit-transform-origin: 0% 100%; }
100% { -webkit-transform: rotate(-12deg);
-webkit-transform-origin: 0% 100%; } /*tentacle*/
}
.squid-2:before {
content:"";
top: -8px;
left: 94px;
height: 50px;
width: 50px;
box-shadow: -8px -4px -2px 4px #d86565,
-11px -7px -1px 2px #ef9797,
-16px 6px -1px -8px #d86565,
12px -18px -2px -10px #d86565,
inset 6px 4px 0px 0px #ad4e4e; /*underside*/
}
.squid-2:after {
content:"";
top: 100px;
left: 100px;
background: #ad4e4e;
height: 8px;
width: 8px;
box-shadow: -10px 10px 0px -1px #ad4e4e,
8px -14px 0px 0px #ad4e4e,
10px -32px 0px 0px #ad4e4e,
10px -46px 0px 0px #ad4e4e,
8px -58px 0px -1px #ad4e4e,
2px -70px 0px -1px #ad4e4e,
-4px -80px 0px -1px #ad4e4e,
-4px -90px 0px -1px #ad4e4e,
2px -100px 0px -1px #ad4e4e,
12px -106px 0px -2px #ad4e4e,
22px -108px 0px -2px #ad4e4e, /*tentacles*/
38px -98px 0px -2px #d86565;
}
.squid-3,
.squid-4 {
position: absolute;
top: 240px;
left: 660px;
background: #222;
height: 32px;
width: 32px;
border-radius: 100%;
box-shadow: -1px 1px 0px 1px #933636, /*eyeshadow*/
-50px -108px -1px -5px #dd8080,
-45px -126px -1px -13px #ef9797; /*shine*/
}
.squid-4 {
box-shadow: inset -4px -4px 0px 13px white;
-webkit-animation: eyeball-2 4s linear infinite;
}
@-webkit-keyframes eyeball-2 {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(90deg); }
100% { -webkit-transform: rotate(0deg); } /*eyeball-2*/
}
.shape-0 {
position: relative;
top: 370px;
height: 440px;
background: -moz-linear-gradient(top, rgba(68,164,237,1) 0%, rgba(68,164,237,1) 4%, rgba(68,164,237,0) 27%, rgba(68,164,237,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,164,237,1)), color-stop(4%,rgba(68,164,237,1)), color-stop(27%,rgba(68,164,237,0)), color-stop(100%,rgba(68,164,237,0)));
background: -webkit-linear-gradient(top, rgba(68,164,237,1) 0%,rgba(68,164,237,1) 4%,rgba(68,164,237,0) 27%,rgba(68,164,237,0) 100%);
background: -o-linear-gradient(top, rgba(68,164,237,1) 0%,rgba(68,164,237,1) 4%,rgba(68,164,237,0) 27%,rgba(68,164,237,0) 100%);
background: -ms-linear-gradient(top, rgba(68,164,237,1) 0%,rgba(68,164,237,1) 4%,rgba(68,164,237,0) 27%,rgba(68,164,237,0) 100%);
background: linear-gradient(top, rgba(68,164,237,1) 0%,rgba(68,164,237,1) 4%,rgba(68,164,237,0) 27%,rgba(68,164,237,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44a4ed', endColorstr='#0044a4ed',GradientType=0 );
/*waves*/
}
#waves {
opacity: .3;
position: relative;
top: -310px;
}
.shape-1,
.shape-1:before,
.shape-1:after,
.shape-2,
.shape-2:before,
.shape-2:after,
.shape-3,
.shape-3:before,
.shape-3:after,
.shape-4,
.shape-4:before,
.shape-4:after,
.shape-5,
.shape-5:before,
.shape-5:after,
.shape-6,
.shape-6:before,
.shape-6:after{
position: absolute;
top: 350px;
background: transparent;
height: 20px;
width: 20px;
border-radius: 10px;
box-shadow: -18px 2px 0px 14px #44a4ed,
-18px 6px 0px 17px #44a4ed,
inset 2px -1px 0px 1px #eee;
-webkit-animation: waves 2s linear infinite;
}
@-webkit-keyframes waves {
0% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(-2deg); }
100% { -webkit-transform: rotate(2deg); }
}
.shape-1,
.shape-1:before,
.shape-1:after {
top: 350px;
left: 80px;
}
.shape-2,
.shape-2:before,
.shape-2:after {
left: 238px;
}
.shape-3,
.shape-3:before,
.shape-3:after {
left: 397px;
}
.shape-4,
.shape-4:before,
.shape-4:after {
left: 556px;
}
.shape-5,
.shape-5:before,
.shape-5:after {
left: 715px;
}
.shape-6,
.shape-6:before,
.shape-6:after {
left: 874px;
}
.shape-1:before,
.shape-1:after,
.shape-2:before,
.shape-2:after,
.shape-3:before,
.shape-3:after,
.shape-4:before,
.shape-4:after,
.shape-5:before,
.shape-5:after,
.shape-6:before,
.shape-6:after {
content:"";
top: 00px;
}
.shape-1:before,
.shape-2:before,
.shape-3:before,
.shape-4:before,
.shape-5:before,
.shape-6:before {
left: -53px;
}
.shape-1:after,
.shape-2:after,
.shape-3:after,
.shape-4:after,
.shape-5:after,
.shape-6:after {
left: 53px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="part-1">
<div id="part-2">
<div id="whale">
<div class="squid00"></div> <!--arm in jaw-->
<div id="attack">
<div class="squid01"></div> <!--attacking arm-->
</div>
<div class="whale-1"></div> <!--head-->
<div class="whale-2"></div> <!--jaw-->
<div class="squid02"></div> <!--arm in jaw-->
<div class="whale-3"></div> <!--details-->
<div class="whale-4"></div> <!--eyeball-->
<div class="whale-5"></div> <!--tailbulk-->
<div class="whale-6"></div> <!--tail-->
<div class="squid03"></div> <!--armwrap-->
<div class="whale-7"></div> <!--fin-->
</div>
<div id="squid">
<div class="squid-1"></div> <!--head-->
<div class="squid-2"></div> <!--body-->
<div class="squid-3"></div> <!--details-->
<div class="squid-4"></div> <!--eyeball-->
<div class="squid-5"></div> <!--note-->
<div class="squid-6"></div> <!--note-->
</div>
</div>
<div id="waves">
<div class="shape-0"></div>
<div class="shape-1"></div>
<div class="shape-2"></div>
<div class="shape-3"></div>
<div class="shape-4"></div>
<div class="shape-5"></div>
<div class="shape-6"></div>
</div>
</div>
</body>
</html>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment