Created
April 25, 2012 06:29
-
-
Save itsjustkarissa/2487225 to your computer and use it in GitHub Desktop.
Whale vs. Squid
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
/** | |
* 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; | |
} | |
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
<!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> |
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
{"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