Skip to content

Instantly share code, notes, and snippets.

@dsmy

dsmy/darkNight.html

Created January 4, 2013 20:53
Show Gist options
  • Save dsmy/4455915 to your computer and use it in GitHub Desktop.
Save dsmy/4455915 to your computer and use it in GitHub Desktop.
Download ZIP
PURE CSS3 BATMAN LOGO -webkit- CSS3 ANIMATED FLYING http://codepen.io/ewe/pen/frEum
Raw
darkNight.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Batman Logo Animated Wings</title>
<link href='http://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Pure CSS3 Batman Logo</h1>
<h2><span>-webkit-</span> CSS3 Animated Flying</h2>
<div class="batman">
<div class="bat-cave">
<div class="left-wing-connector">
<div></div> <!-- 1 -->
<div></div> <!-- 2 -->
<div></div> <!-- 3 -->
</div>
<div class="left-wing">
<div></div> <!-- 1 -->
<div></div> <!-- 2 -->
<div></div> <!-- 3 -->
<div class="left-smoother">
</div>
</div>
<div class="bat-body">
<div></div> <!-- 1 -->
<div></div> <!-- 2 -->
<div></div> <!-- 3 -->
<div></div> <!-- 4 -->
<div></div> <!-- 5 -->
</div>
<div class="right-wing-connector">
<div></div> <!-- 1 -->
<div></div> <!-- 2 -->
<div></div> <!-- 3 -->
</div>
<div class="right-wing">
<div></div> <!-- 1 -->
<div></div> <!-- 2 -->
<div></div> <!-- 3 -->
<div class="right-smoother">
</div>
</div>
</div>
</div>
</body>
</html>
Raw
knighted.css
/* Animation only works in a webkit browser*/
body {
background:white;
}
h1,
h2 {
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: uppercase;
}
span {
text-transform: lowercase;
color: orangeRed;
}
.batman {
top: -24px;
background:white;
width: 760px;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
padding: 0px;
}
.bat-cave {
position: relative;
top: 210px;
}
.bat-body {
background: black;
width: 52px;
left: 350px;
height: 244px;
margin: 0 auto;
margin-top: 9px;
position: absolute;
z-index: 9999;
-webkit-animation: body-move 1.1s infinite;
/*-moz-animation: body-move 1.1s infinite;
-ms-animation: body-move 1.1s infinite;
-o-animation: body-move 1.1s infinite; */
animation: body-move 1.1s infinite;
-webkit-transform-origin: center center;
/*-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top; */
transform-origin: left top;
}
.bat-body > div:nth-child(1) {
background: white;
width: 30px;
height: 35px;
position: absolute;
top: 0;
left: 7px;
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-ms-transform: skewX(15deg);
-o-transform: skewX(15deg);
transform: skewX(15deg);
}
.bat-body > div:nth-child(2) {
background: white;
width: 30px;
height: 35px;
position: absolute;
top:0;
right: 6px;
-webkit-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-o-transform: skewX(-15deg);
transform: skewX(-15deg);
}
.bat-body > div:nth-child(3) {
background: black;
width: 50px;
height: 16px;
position: relative;
margin: 0 auto;
top: 25px;
border-radius: 50%;
}
.bat-body > div:nth-child(4) {
background: white;
width: 384px;
height: 205px;
position: relative;
top: 122px;
left: -357px;
border-radius: 100%;
}
.bat-body > div:nth-child(5) {
background: white;
width: 384px;
height: 205px;
position: relative;
top: -84px;
left: 26px;
border-radius: 100%;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
/* Left Wing */
.left-wing {
-webkit-animation: wing-left 1.1s infinite;
/*-moz-animation: wing-left 1.1s infinite;
-ms-animation: wing-left 1.1s infinite;
-o-animation: wing-left 1.1s infinite;
animation: wing-left 1.1s infinite; */
-webkit-transform-origin: right top;
/*-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top; */
transform-origin: right top;
}
.left-wing,
.right-wing {
background: black;
width: 350px;
height: 182px;
position: absolute;
}
.left-wing > div:nth-child(1) {
background:white;
width: 92px;
height: 122px;
position: absolute;
top: -66px;
left: 260px;
border-radius: 50%;
border-bottom-right-radius: 7%;
}
.left-wing > div:nth-child(2) {
background: white;
width: 325px; height: 205px;
position: absolute;
top: -23.3%;
left: -47.2%;
border-radius: 100%;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.left-wing > div:nth-child(3) {
background: white;
width: 384px; height: 205px;
position: relative;
top: 138px;
left: -16px;
border-radius: 100%;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
/* left Smoother */
.left-smoother {
background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 49%, transparent 51%, transparent 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(49%,rgba(0, 0, 0, 1)), color-stop(51%,transparent), color-stop(100%,transparent));
background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
background: -o-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
background: -ms-linear-gradient(-45deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 49%,transparent 51%,transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
width: 60px;
height: 60px;
position: absolute;
top: 124px;
left: 319px;
-webkit-transform: rotate(-136deg);
-moz-transform: rotate(-136deg);
-ms-transform: rotate(-136deg);
-o-transform: rotate(-136deg);
transform: rotate(-136deg);
}
/* left wing connector */
.left-wing-connector {
background: black;
width: 118px;
height: 147px;
position: absolute;
top: 44px;
left: 232px;
padding-top: 11px;
overflow: hidden;
}
.left-wing-connector > div:nth-child(1) {
background: black;
width: 35px;
height: 20px;
position: relative;
top: -5px;
left: 83px;
}
.left-wing-connector > div:nth-child(2) {
background: white;
width: 50px;
height: 40px;
position: relative;
top: -59px;
left: 72px;
border-bottom-left-radius: 89%;
}
.left-wing-connector > div:nth-child(3) {
background: white;
width: 325px;
height: 205px;
position: relative;
top: 36px;
left: -180px;
border-radius: 100%;
}
/* Right Wing */
.right-wing {
left: 402px;
-webkit-animation: wing-right 1.1s infinite;
/*-moz-animation: wing-right 1.1s infinite;
-ms-animation: wing-right 1.1s infinite;
-o-animation: wing-right 1.1s infinite;
animation: wing-right 1.1s infinite; */
-webkit-transform-origin: left top;
/*-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top; */
transform-origin: left top;
}
.right-wing > div:nth-child(1) {
background:white;
width: 92px;
height: 122px;
position: absolute;
top: -66px;
left: -2px;
border-radius: 50%;
border-bottom-left-radius: 7%;
}
.right-wing > div:nth-child(2) {
background: white;
width: 325px;
height: 205px;
position: absolute;
top: 13.7%;
left: 56.3%;
border-radius: 100%;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.right-wing > div:nth-child(3) {
background: white;
width: 384px;
height: 205px;
position: absolute;
top: 139px;
left: -19px;
border-radius: 100%;
}
/* Left wing keyframes*/
@-webkit-keyframes wing-left{
0%{-webkit-transform:rotate(0deg);transform-origin:left top;}
50%{-webkit-transform:rotate(40deg);transform-origin:left top;}
100%{-webkit-transform:rotate(0deg);transform-origin:left top;}
}
/*
@-moz-keyframes wing-left{
0%{-moz-transform:rotate(0deg);-moz-transform-origin:left top;}
50%{-moz-transform:rotate(40deg);-moz-transform-origin:left top;}
100%{-moz-transform:rotate(0deg);-moz-transform-origin:left top;}
}
@-ms-keyframes wing-left{
0%{-ms-transform:rotate(0deg);-ms-transform-origin:left top;}
50%{-ms-transform:rotate(40deg);-ms-transform-origin:left top;}
100%{-ms-transform:rotate(0deg);-ms-transform-origin:left top;}
}
@-o-keyframes wing-left{
0%{-o-transform:rotate(0deg);-o-transform-origin:left top;}
50%{-o-transform:rotate(40deg);-o-transform-origin:left top;}
100%{-o-transform:rotate(0deg);-o-transform-origin:left top;}
}
*/
@keyframes wing-left{
0%{transform:rotate(0deg); transform-origin:left top;}
50%{transform:rotate(40deg); transform-origin:left top;}
100%{transform:rotate(0deg); transform-origin:left top;}
}
/* Right Wing Key Frames */
@-webkit-keyframes wing-right{
0%{-webkit-transform:rotate(0deg);transform-origin:left top;}
50%{-webkit-transform:rotate(-40deg);transform-origin:left top;}
100%{-webkit-transform:rotate(0deg);transform-origin:left top;}
}
/*
@-moz-keyframes wing-left{
0%{-moz-transform:rotate(0deg);-moz-transform-origin:left top;}
50%{-moz-transform:rotate(-40deg);-moz-transform-origin:left top;}
100%{-moz-transform:rotate(0deg);-moz-transform-origin:left top;}
}
@-ms-keyframes wing-left{
0%{-ms-transform:rotate(0deg);-ms-transform-origin:left top;}
50%{-ms-transform:rotate(-40deg);-ms-transform-origin:left top;}
100%{-ms-transform:rotate(0deg);-ms-transform-origin:left top;}
}
@-o-keyframes wing-left{
0%{-o-transform:rotate(0deg);-o-transform-origin:left top;}
50%{-o-transform:rotate(-40deg);-o-transform-origin:left top;}
100%{-o-transform:rotate(0deg);-o-transform-origin:left top;}
}
*/
@keyframes wing-left{
0%{transform:rotate(0deg); transform-origin:left top;}
50%{transform:rotate(-40deg); transform-origin:left top;}
100%{transform:rotate(0deg); transform-origin:left top;}
}
/* Body Keyframes*/
@-webkit-keyframes body-move {
0%{top: 0;transform-origin:center center;}
50%{top: -10px; transform-origin:center center;}
100%{top: 0;transform-origin:center center;}
}
/* Right Smoother */
.right-smoother {
background: -moz-linear-gradient(45deg, transparent 0%, transparent 51%, rgba(0, 0, 0, 1) 54%, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,transparent), color-stop(51%,transparent), color-stop(54%,rgba(0, 0, 0, 1)), color-stop(100%,rgba(0, 0, 0, 1)));
background: -webkit-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
background: linear-gradient(45deg, transparent 0%,transparent 51%,rgba(0, 0, 0, 1) 54%,rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
width: 60px;
height: 60px;
position: absolute;
top: 125px;
left: -28px;
-webkit-transform: rotate(-215deg);
-moz-transform: rotate(-215deg);
-ms-transform: rotate(-215deg);
-o-transform: rotate(-215deg);
transform: rotate(-215deg);
}
/* Right wing connector */
.right-wing-connector {
background: black;
width: 118px;
height: 147px;
position: absolute;
top: 44px;
left: 402px;
padding-top: 11px;
}
.right-wing-connector > div:nth-child(1) {
background: black;
width: 35px;
height: 20px;
position: relative;
top: -5px;
left: 0px;
}
.right-wing-connector > div:nth-child(2) {
background: white;
width: 50px;
height: 40px;
position: relative;
top: -59px;
left: -3px;
border-bottom-right-radius: 89%;
}
.right-wing-connector > div:nth-child(3) {
background: white;
width: 384px;
height: 205px;
position: relative;
top: 32px;
left: -26px;
border-radius: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment