Created
January 11, 2012 04:00
-
-
Save autarc/1592940 to your computer and use it in GitHub Desktop.
raupe
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
| /** | |
| * raupe | |
| **/ | |
| #background{ | |
| background: #000; | |
| height: 400px; | |
| width: 640px; | |
| margin: 0 auto; | |
| margin-top: 20px; | |
| } | |
| .rollover{ | |
| position: relativ; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| .head{ | |
| position: absolute; | |
| top: 20px; | |
| left: 200px; | |
| z-index: 2; | |
| opacity: 1; | |
| transform: scale(1, 1); | |
| transition: scale 2s ease-in-out; | |
| transition: opacity 2s ease-in-out; | |
| } | |
| .head2{ | |
| position: absolute; | |
| top: 20px; | |
| left: 200px; | |
| z-index: 1; | |
| opacity: 0; | |
| transform: scale(0.5,0.5); | |
| transition: scale 2s ease-in-out; | |
| transition: top 2s ease-in-out; | |
| } | |
| /* anfang*/ | |
| .antenna_left{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 20px; | |
| height: 190px; | |
| background-color: #af5; | |
| border-top-left-radius: 99999px; | |
| border-top-right-radius: 99999px; | |
| transform:translate(-40px,-400px) rotate(-50deg); | |
| } | |
| .antenna_right{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 20px; | |
| height: 190px; | |
| background-color: #af5; | |
| border-top-left-radius: 99999px; | |
| border-top-right-radius: 99999px; | |
| transform:translate(40px,-590px) rotate(50deg); | |
| } | |
| .antenna_ball_left{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #af5; | |
| border-radius: 99999px; | |
| transform:translateX(-4px); | |
| } | |
| .antenna_ball_right{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #af5; | |
| border-radius: 99999px; | |
| transform:translateX(-4px); | |
| } | |
| .eye{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #fff; | |
| width: 40px; | |
| height: 60px; | |
| } | |
| .eye_left{ | |
| transform:translate(-40px,-650px) rotate(0deg); | |
| border-radius: 0 50px; | |
| } | |
| .eye_right{ | |
| transform:translate(40px,-710px) rotate(0deg); | |
| border-radius: 50px 0; | |
| } | |
| .eye_left_inner{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| width: 20px; | |
| height: 20px; | |
| background: #000; | |
| border-radius: 999999px; | |
| transform:translateY(20px); | |
| } | |
| .eye_right_inner{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| width: 20px; | |
| height: 20px; | |
| background: #000; | |
| border-radius: 999999px; | |
| transform:translateY(20px); | |
| } | |
| .backen{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #af5; | |
| width: 220px; | |
| height: 100px; | |
| border-top-left-radius: 80px; | |
| border-top-right-radius: 80px; | |
| border-bottom-left-radius: 40px; | |
| border-bottom-right-radius: 40px; | |
| } | |
| .stirn{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #af5; | |
| border-top-left-radius: 999999px; | |
| border-top-right-radius: 999999px; | |
| } | |
| .stirn0{ | |
| height: 20px; | |
| width: 100px; | |
| transform:translateY(117px); | |
| } | |
| .stirn1{ | |
| height: 30px; | |
| width: 115px; | |
| transform:translateY(99px); | |
| } | |
| .stirn2{ | |
| height: 90px; | |
| width: 136px; | |
| transform:translateY(63px); | |
| border-bottom-left-radius: 10px; | |
| border-bottom-right-radius: 10px; | |
| } | |
| .stirn3{ | |
| height: 20px; | |
| width: 140px; | |
| transform:translateY(41px); | |
| } | |
| .stirn4{ | |
| height: 20px; | |
| width: 150px; | |
| transform:translateY(32px); | |
| } | |
| .stirn5{ | |
| height: 20px; | |
| width: 160px; | |
| transform:translateY(20px); | |
| } | |
| .kinn0{ | |
| height: 20px; | |
| width: 180px; | |
| transform:translateY(-16px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 999999px; | |
| border-bottom-right-radius: 999999px; | |
| } | |
| .kinn1{ | |
| height: 40px; | |
| width: 170px; | |
| transform:translateY(-43px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 999999px; | |
| border-bottom-right-radius: 999999px; | |
| } | |
| .kinn2{ | |
| height: 30px; | |
| width: 150px; | |
| transform:translateY(-68px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .kinn3{ | |
| height: 30px; | |
| width: 130px; | |
| transform:translateY(-85px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .kinn4{ | |
| height: 20px; | |
| width: 100px; | |
| transform:translateY(-100px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .mouth0{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #fff; | |
| height: 50px; | |
| width: 80px; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| transform:translateY(-680px); | |
| border-bottom: solid 3px; | |
| } | |
| .mouth1{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #af5; | |
| } | |
| .mouth2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #af5; | |
| } | |
| .nose{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #af5; | |
| width: 80px; | |
| height: 30px; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| transform:translateY(-740px); | |
| } | |
| /** | |
| wechsel für 2 raupe | |
| **/ | |
| .antenna_left2{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 20px; | |
| height: 190px; | |
| background-color: #f15; | |
| border-top-left-radius: 99999px; | |
| border-top-right-radius: 99999px; | |
| transform:translate(-40px,-400px) rotate(-50deg); | |
| } | |
| .antenna_right2{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 20px; | |
| height: 190px; | |
| background-color: #f15; | |
| border-top-left-radius: 99999px; | |
| border-top-right-radius: 99999px; | |
| transform:translate(40px,-590px) rotate(50deg); | |
| } | |
| .antenna_ball_left2{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #f15; | |
| border-radius: 99999px; | |
| transform:translateX(-4px); | |
| } | |
| .antenna_ball_right2{ | |
| position: relative; | |
| margin: 0 auto; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #f15; | |
| border-radius: 99999px; | |
| transform:translateX(-4px); | |
| } | |
| .eye2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #fff; | |
| width: 40px; | |
| height: 60px; | |
| } | |
| .eye_left2{ | |
| transform:translate(-40px,-650px) rotate(0deg); | |
| border-radius: 0 50px; | |
| } | |
| .eye_right2{ | |
| transform:translate(40px,-710px) rotate(0deg); | |
| border-radius: 50px 0; | |
| } | |
| .eye_left_inner2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| width: 20px; | |
| height: 20px; | |
| background: #000; | |
| border-radius: 999999px; | |
| transform:translateY(20px); | |
| } | |
| .eye_right_inner2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| width: 20px; | |
| height: 20px; | |
| background: #000; | |
| border-radius: 999999px; | |
| transform:translateY(20px); | |
| } | |
| .backen2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #f15; | |
| width: 220px; | |
| height: 100px; | |
| border-top-left-radius: 80px; | |
| border-top-right-radius: 80px; | |
| border-bottom-left-radius: 40px; | |
| border-bottom-right-radius: 40px; | |
| } | |
| .stirn22{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #f15; | |
| border-top-left-radius: 999999px; | |
| border-top-right-radius: 999999px; | |
| } | |
| .stirn02{ | |
| height: 20px; | |
| width: 100px; | |
| transform:translateY(117px); | |
| } | |
| .stirn12{ | |
| height: 30px; | |
| width: 115px; | |
| transform:translateY(99px); | |
| } | |
| .stirn22{ | |
| height: 90px; | |
| width: 136px; | |
| transform:translateY(63px); | |
| border-bottom-left-radius: 10px; | |
| border-bottom-right-radius: 10px; | |
| } | |
| .stirn32{ | |
| height: 20px; | |
| width: 140px; | |
| transform:translateY(41px); | |
| } | |
| .stirn42{ | |
| height: 20px; | |
| width: 150px; | |
| transform:translateY(32px); | |
| } | |
| .stirn52{ | |
| height: 20px; | |
| width: 160px; | |
| transform:translateY(20px); | |
| } | |
| .kinn02{ | |
| height: 20px; | |
| width: 180px; | |
| transform:translateY(-16px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 999999px; | |
| border-bottom-right-radius: 999999px; | |
| } | |
| .kinn12{ | |
| height: 40px; | |
| width: 170px; | |
| transform:translateY(-43px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 999999px; | |
| border-bottom-right-radius: 999999px; | |
| } | |
| .kinn22{ | |
| height: 30px; | |
| width: 150px; | |
| transform:translateY(-68px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .kinn32{ | |
| height: 30px; | |
| width: 130px; | |
| transform:translateY(-85px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .kinn42{ | |
| height: 20px; | |
| width: 100px; | |
| transform:translateY(-100px); | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| } | |
| .mouth02{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #fff; | |
| height: 50px; | |
| width: 80px; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| transform:translateY(-680px); | |
| border-bottom: solid 3px; | |
| } | |
| .nose2{ | |
| position: relative; | |
| margin: 0 auto; | |
| top: 0px; | |
| background: #f15; | |
| width: 80px; | |
| height: 30px; | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-left-radius: 9999px; | |
| border-bottom-right-radius: 9999px; | |
| transform:translateY(-740px); | |
| } | |
| .rollover:hover>.head{ | |
| z-index: 2; | |
| opacity: 0; | |
| transition: all 2s ease-in-out; | |
| transform:scale(0.5,0.5) rotateY(180deg); | |
| } | |
| .rollover:hover>.head2{ | |
| opacity: 1; | |
| z-index: 1; | |
| transition: all 3s ease-in-out; | |
| transform:scale(1,1) rotateY(180deg); | |
| } | |
| .rollover:hover>h1{ | |
| opacity: 1; | |
| transition: all 4s ease-in-out; | |
| } | |
| /* | |
| .rollover:hover>.head1>.kinn0{ | |
| display: none; | |
| transition:all 3s ease-in-out; | |
| } | |
| */ | |
| h1{ | |
| opacity: 0; | |
| text-shadow: 0 1px 0 #ccc, | |
| 0 2px 0 #c9c9c9, | |
| 0 3px 0 #bbb, | |
| 0 4px 0 #b9b9b9, | |
| 0 5px 0 #aaa, | |
| 0 6px 1px rgba(0,0,0,.1), | |
| 0 0 5px rgba(0,0,0,.1), | |
| 0 1px 3px rgba(0,0,0,.3), | |
| 0 3px 5px rgba(0,0,0,.2), | |
| 0 5px 10px rgba(0,0,0,.25), | |
| 0 10px 10px rgba(0,0,0,.2), | |
| 0 20px 20px rgba(0,0,0,.15); | |
| color: #fff; | |
| } | |
| #msg{ | |
| position: relative; | |
| width: 50px; | |
| margin: 0px auto; | |
| } | |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <div id="background"> | |
| <div class="rollover"> | |
| <div class="head"> | |
| <div class="stirn0 stirn"></div> | |
| <div class="stirn1 stirn"></div> | |
| <div class="stirn2 stirn"></div> | |
| <div class="stirn3 stirn"></div> | |
| <div class="stirn4 stirn"></div> | |
| <div class="stirn5 stirn"></div> | |
| <div class="backen"></div> | |
| <div class="kinn0 stirn"></div> | |
| <div class="kinn1 stirn"></div> | |
| <div class="kinn2 stirn"></div> | |
| <div class="kinn3 stirn"></div> | |
| <div class="kinn4 stirn"></div> | |
| <div class="antenna_left"> | |
| <div class="antenna_ball_left"></div> | |
| </div> | |
| <div class="antenna_right"> | |
| <div class="antenna_ball_right"></div> | |
| </div> | |
| <div class="eye_left eye"> | |
| <div class="eye_left_inner"></div> | |
| </div> | |
| <div class="eye_right eye"> | |
| <div class="eye_right_inner"></div> | |
| </div> | |
| <div class="mouth0"></div> | |
| <div class="mouth1"></div> | |
| <div class="mouth3"></div> | |
| <div class="nose"></div> | |
| </div> | |
| <div class="head2"> | |
| <div class="stirn02 stirn2"></div> | |
| <div class="stirn12 stirn2"></div> | |
| <div class="stirn22 stirn2"></div> | |
| <div class="stirn32 stirn2"></div> | |
| <div class="stirn42 stirn2"></div> | |
| <div class="stirn52 stirn2"></div> | |
| <div class="backen2"></div> | |
| <div class="kinn02 stirn2"></div> | |
| <div class="kinn12 stirn2"></div> | |
| <div class="kinn22 stirn2"></div> | |
| <div class="kinn32 stirn2"></div> | |
| <div class="kinn42 stirn2"></div> | |
| <div class="antenna_left2"> | |
| <div class="antenna_ball_left2"></div> | |
| </div> | |
| <div class="antenna_right2"> | |
| <div class="antenna_ball_right2"></div> | |
| </div> | |
| <div class="eye_left2 eye2"> | |
| <div class="eye_left_inner2"></div> | |
| </div> | |
| <div class="eye_right2 eye2"> | |
| <div class="eye_right_inner2"></div> | |
| </div> | |
| <div class="mouth02"></div> | |
| <div class="mouth12"></div> | |
| <div class="mouth32"></div> | |
| <div class="nose2"></div> | |
| </div> | |
| <h1> | |
| @Fabian: Spiel mal wieder :) | |
| </h1> | |
| </div> | |
| </div> | |
| <img src="http://i.snag.gy/iO1AH.jpg" style="height: 200px;"> | |
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-vertical","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment