Pure CSS3 rotating Bayern Munich logo
How do I make an pure css3 rotating bayern munich logo?
Pure CSS3 rotating Bayern Munich logo. What is a pure css3 rotating bayern munich logo? How do you make a pure css3 rotating bayern munich logo? This script and codes were developed by Vahid on 16 September 2022, Friday.
Pure CSS3 rotating Bayern Munich logo Previews
Pure CSS3 rotating Bayern Munich logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 rotating Bayern Munich logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="FCBayernMunchen"> <div class="out"> <div class="text"> <span>F</span> <span>C</span> <span>B</span> <span>A</span> <span>Y</span> <span>E</span> <span>R</span> <span>N</span> <span class="top-rotate">M</span> <span class="top-rotate">U</span> <span class="top-rotate">N</span> <span class="top-rotate">C</span> <span class="top-rotate">H</span> <span class="top-rotate">E</span> <span class="top-rotate">N</span> </div> <div class="in"> </div> </div>
</div>
</body>
</html>Pure CSS3 rotating Bayern Munich logo - Script Codes CSS Codes
*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body, html { width: 100%; height: 100%; margin: 0; padding: 0;
}
body { background: #d61e29; background-image: -webkit-repeating-linear-gradient(45deg, #d61e29 0px, #661011 70px); background-image: -moz-repeating-linear-gradient(45deg, #d61e29 0px, #661011 70px); background-image: -o-repeating-linear-gradient(45deg, #d61e29 0px, #661011 70px); background-image: -ms-repeating-linear-gradient(45deg, #d61e29 0px, #661011 70px); background-image: repeating-linear-gradient(45deg, #d61e29 0px, #661011 70px); -webkit-animation: bg 15s infinite linear; -moz-animation: bg 15s infinite linear; -o-animation: bg 15s infinite linear; -ms-animation: bg 15s infinite linear; animation: bg 15s infinite linear; -webkit-background-size: 100px 100px; -moz-background-size: 100px 100px; background-size: 100px 100px;
}
.FCBayernMunchen { position: absolute; left: 50%; top: 50%; margin-left: -153px; margin-top: -153px; width: 306px; height: 306px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 350px; -moz-perspective: 350px; -o-perspective: 350px; -ms-perspective: 350px; perspective: 350px; -webkit-animation: rotate 10s infinite linear; -moz-animation: rotate 10s infinite linear; -o-animation: rotate 10s infinite linear; -ms-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear;
}
.out { position: absolute; background: #d31145; top: 6px; left: 6px; width: 294px; height: 294px; border: 6px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 6px #0167b1; -moz-box-shadow: 0 0 0 6px #0167b1; -o-box-shadow: 0 0 0 6px #0167b1; box-shadow: 0 0 0 6px #0167b1; z-index: 1;
}
.in { width: 170px; height: 170px; border: 6px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 6px solid #ffffff; position: absolute; left: 56px; top: 56px; overflow: hidden; background-color: #ffffff; background-image: -weblit-linear-gradient(60deg, #0167b1 28%, transparent 28%, transparent 62%, #0167b1 62%, #0167b1); background-image: -moz-linear-gradient(60deg, #0167b1 28%, transparent 28%, transparent 62%, #0167b1 62%, #0167b1); background-image: -o-linear-gradient(60deg, #0167b1 28%, transparent 28%, transparent 62%, #0167b1 62%, #0167b1); background-image: -ms-linear-gradient(60deg, #0167b1 28%, transparent 28%, transparent 62%, #0167b1 62%, #0167b1); background-image: linear-gradient(60deg, #0167b1 28%, transparent 28%, transparent 62%, #0167b1 62%, #0167b1); background-size: 22px 77px; background-position: 7px 0px;
}
.text { width: 100%; height: 100%; color: #ffffff; font-family: Arial; font-weight: bold; font-size: 48px; position: absolute; margin-left: -20px; left: 50%;
}
.text > span { height: 147px; width: 40px; display: inline-block; position: absolute; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; padding-top: 2px;
}
.text > span.top-rotate { -webkit-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; padding-top: 86px; top: 50%;
}
.text > span:nth-of-type(1) { -webkit-transform: rotateZ(-70deg); -moz-transform: rotateZ(-70deg); -o-transform: rotateZ(-70deg); -ms-transform: rotateZ(-70deg); transform: rotateZ(-70deg);
}
.text > span:nth-of-type(2) { -webkit-transform: rotateZ(-57deg); -moz-transform: rotateZ(-57deg); -o-transform: rotateZ(-57deg); -ms-transform: rotateZ(-57deg); transform: rotateZ(-57deg);
}
.text > span:nth-of-type(3) { -webkit-transform: rotateZ(-30deg); -moz-transform: rotateZ(-30deg); -o-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg);
}
.text > span:nth-of-type(4) { -webkit-transform: rotateZ(-10deg); -moz-transform: rotateZ(-10deg); -o-transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); transform: rotateZ(-10deg);
}
.text > span:nth-of-type(5) { -webkit-transform: rotateZ(9deg); -moz-transform: rotateZ(9deg); -o-transform: rotateZ(9deg); -ms-transform: rotateZ(9deg); transform: rotateZ(9deg);
}
.text > span:nth-of-type(6) { -webkit-transform: rotateZ(26deg); -moz-transform: rotateZ(26deg); -o-transform: rotateZ(26deg); -ms-transform: rotateZ(26deg); transform: rotateZ(26deg);
}
.text > span:nth-of-type(7) { -webkit-transform: rotateZ(46deg); -moz-transform: rotateZ(46deg); -o-transform: rotateZ(46deg); -ms-transform: rotateZ(46deg); transform: rotateZ(46deg);
}
.text > span:nth-of-type(8) { -webkit-transform: rotateZ(70deg); -moz-transform: rotateZ(70deg); -o-transform: rotateZ(70deg); -ms-transform: rotateZ(70deg); transform: rotateZ(70deg);
}
.text > span:nth-of-type(9) { -webkit-transform: rotateZ(63deg); -moz-transform: rotateZ(63deg); -o-transform: rotateZ(63deg); -ms-transform: rotateZ(63deg); transform: rotateZ(63deg);
}
.text > span:nth-of-type(10) { -webkit-transform: rotateZ(37deg); -moz-transform: rotateZ(37deg); -o-transform: rotateZ(37deg); -ms-transform: rotateZ(37deg); transform: rotateZ(37deg);
}
.text > span:nth-of-type(11) { -webkit-transform: rotateZ(15deg); -moz-transform: rotateZ(15deg); -o-transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); transform: rotateZ(15deg);
}
.text > span:nth-of-type(12) { -webkit-transform: rotateZ(-5deg); -moz-transform: rotateZ(-5deg); -o-transform: rotateZ(-5deg); -ms-transform: rotateZ(-5deg); transform: rotateZ(-5deg);
}
.text > span:nth-of-type(13) { -webkit-transform: rotateZ(-25deg); -moz-transform: rotateZ(-25deg); -o-transform: rotateZ(-25deg); -ms-transform: rotateZ(-25deg); transform: rotateZ(-25deg);
}
.text > span:nth-of-type(14) { -webkit-transform: rotateZ(-44deg); -moz-transform: rotateZ(-44deg); -o-transform: rotateZ(-44deg); -ms-transform: rotateZ(-44deg); transform: rotateZ(-44deg);
}
.text > span:nth-of-type(15) { -webkit-transform: rotateZ(-63deg); -moz-transform: rotateZ(-63deg); -o-transform: rotateZ(-63deg); -ms-transform: rotateZ(-63deg); transform: rotateZ(-63deg);
}
.text > span:nth-of-type(10):after { content: ''; display: block; position: absolute; top: 98px; left: 13px; width: 0; height: 0; border-top: 15px solid #ffffff; border-left: 4px solid transparent; border-right: 4px solid transparent;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(359deg); -moz-transform: rotateY(359deg); -o-transform: rotateY(359deg); -ms-transform: rotateY(359deg); transform: rotateY(359deg); }
}
@-moz-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(359deg); -moz-transform: rotateY(359deg); -o-transform: rotateY(359deg); -ms-transform: rotateY(359deg); transform: rotateY(359deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(359deg); -moz-transform: rotateY(359deg); -o-transform: rotateY(359deg); -ms-transform: rotateY(359deg); transform: rotateY(359deg); }
}
@-webkit-keyframes bg { 0% { background-position: 0 0; } 100% { background-position: 0 99px; }
}
@-moz-keyframes bg { 0% { background-position: 0 0; } 100% { background-position: 0 99px; }
}
@keyframes bg { 0% { background-position: 0 0; } 100% { background-position: 0 99px; }
}
| Developer | Vahid |
| Username | vahidseo |
| Uploaded | September 16, 2022 |
| Rating | 3 |
| Size | 2,676 Kb |
| Views | 30,360 |
Do you need developer help for Pure CSS3 rotating Bayern Munich 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!
Vahid (vahidseo) Script Codes
| Name | Size |
| 3D Electric Guitar Distortion Pedal | 9,023 Kb |
| Awesome extensible radial progress | 2,285 Kb |
| Website Loading Screen | 2,943 Kb |
| Text masking image with JavaScript | 28,997 Kb |
| Mouse movement parallax effect | 2,949 Kb |
| Guitar Notes And Scales Viewer | 5,479 Kb |
| Mario Jump with CSS3 | 6,485 Kb |
| 3D WWII Interactive Plane | 3,652 Kb |
| Parallax with 3D transform - Taxi Driver | 3,145 Kb |
| Rotating Checkbox - CSS3 | 2,425 Kb |
Create amazing love letters 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 |
| Background Images | Jooonebug | 2,100 Kb |
| Animated Logo | Shakdaniel | 2,672 Kb |
| Marching Squares Visualized | Sakri | 7,074 Kb |
| CSS3 Butterfly | Timohausmann | 3,430 Kb |
| JS Countdown Timer | Ayoungh | 2,435 Kb |
| CLE_Old_March | Saritaleroux | 6,234 Kb |
| CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
| Flex layout example | Mofny | 1,663 Kb |
| Adding Items | Valhead | 4,008 Kb |
| Vue.js Starter | Andymerskin | 1,268 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!