Pure CSS3 Batman Logo
How do I make an pure css3 batman logo?
The Dark Knight Rises in CSS3 (Batman logo) If you are in a webkit browser then you will see a animated bat flying!. What is a pure css3 batman logo? How do you make a pure css3 batman logo? This script and codes were developed by B. on 10 December 2022, Saturday.
Pure CSS3 Batman Logo Previews
Pure CSS3 Batman Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Batman Logo </title> <link href='https://fonts.googleapis.com/css?family=Lato:900' rel='stylesheet' type='text/css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Animation only works in a webkit browser*/
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: 0;
}
.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; animation: body-move 1.1s infinite; transform-origin: center center; transform-origin: left top;
}
.bat-body > div:nth-child(1) { background: white; width: 30px; height: 35px; position: absolute; top: 0; left: 7px; transform: skewX(15deg);
}
.bat-body > div:nth-child(2) { background: white; width: 30px; height: 35px; position: absolute; top:0; right: 6px; 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%; transform-origin: left top;
}
/* Left Wing */
.left-wing { animation: wing-left 1.1s infinite; 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%; transform-origin: left top; transform: rotate(12deg);
}
.left-wing > div:nth-child(3) { background: white; width: 384px; height: 205px; position: relative; top: 138px; left: -16px; border-radius: 100%; 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; 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; animation: wing-right 1.1s infinite; 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%; transform-origin: left top; 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*/
@keyframes wing-right{ 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 */
@keyframes wing-left{ 0%{transform:rotate(0deg); transform-origin:right top;} 50%{transform:rotate(40deg); transform-origin:right top;} 100%{transform:rotate(0deg); transform-origin:right top;}
}
/* Body Keyframes*/
@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; 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: 0;
}
.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%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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>
Pure CSS3 Batman Logo - Script Codes CSS Codes
/* Animation only works in a webkit browser*/
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: 0;
}
.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; animation: body-move 1.1s infinite; transform-origin: center center; transform-origin: left top;
}
.bat-body > div:nth-child(1) { background: white; width: 30px; height: 35px; position: absolute; top: 0; left: 7px; transform: skewX(15deg);
}
.bat-body > div:nth-child(2) { background: white; width: 30px; height: 35px; position: absolute; top:0; right: 6px; 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%; transform-origin: left top;
}
/* Left Wing */
.left-wing { animation: wing-left 1.1s infinite; 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%; transform-origin: left top; transform: rotate(12deg);
}
.left-wing > div:nth-child(3) { background: white; width: 384px; height: 205px; position: relative; top: 138px; left: -16px; border-radius: 100%; 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; 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; animation: wing-right 1.1s infinite; 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%; transform-origin: left top; 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*/
@keyframes wing-right{ 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 */
@keyframes wing-left{ 0%{transform:rotate(0deg); transform-origin:right top;} 50%{transform:rotate(40deg); transform-origin:right top;} 100%{transform:rotate(0deg); transform-origin:right top;}
}
/* Body Keyframes*/
@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; 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: 0;
}
.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%;
}
| Developer | B. |
| Username | wearebold |
| Uploaded | December 10, 2022 |
| Rating | 4.5 |
| Size | 4,527 Kb |
| Views | 16,192 |
Do you need developer help for Pure CSS3 Batman Logo?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
B. (wearebold) Script Codes
| Name | Size |
| A Pen by B. | 5,519 Kb |
| Simple Push Menu | 3,455 Kb |
| Simple Accordion | 3,683 Kb |
| Snap.svg Mask faces | 3,545 Kb |
| Instagram Feed with Lightbox2 | 2,895 Kb |
| Polaroid | 4,152 Kb |
| Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
| Particle Earth Map | 5,106 Kb |
| Alerts | 2,726 Kb |
| Simple CSS3 Button | 2,571 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Cofee and sugar | Tripack | 2,094 Kb |
| Clock with full screen background | Owebboy | 2,415 Kb |
| Pure CSS Dial | Lukewatts | 3,018 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Parallax scrolling scene | Iharosi | 2,485 Kb |
| Sass random color animation | Jotavejv | 4,827 Kb |
| Fixed with using Calc | Tomleo | 2,542 Kb |
| Client-side Email Validation | Collizo4sky | 1,538 Kb |
| JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
| Another brick in the wall | Fivera | 1,955 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!