My Logo 2
html {
font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top: 0;
width: 100%;
background: #444;
border-bottom: 3px solid #333;
}
/*Bg Animated*/
html,
body{
background: #444;
}
i {
-webkit-animation: bounce 1.125s ease-in-out infinite alternate;
animation: bounce 1.125s ease-in-out infinite alternate;
display: inline-block;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
font-family: "Product Sans", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 20vmin;
font-weight: 700;
font-style: normal;
white-space: nowrap;
}
i:nth-child(1) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
color: #4285f4;
}
i:nth-child(2) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
color: #ea4335;
}
i:nth-child(3) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
color: #fbbc05;
}
i:nth-child(4) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
color: #4285f4;
}
i:nth-child(5) {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
color: #34a853;
}
i:nth-child(6) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
color: #ea4335;
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
}
100% {
-webkit-transform: translate3d(0, -1em, 0) scale(1.1);
transform: translate3d(0, -1em, 0) scale(1.1);
text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
}
}
@keyframes bounce {
0% {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
}
100% {
-webkit-transform: translate3d(0, -1em, 0) scale(1.1);
transform: translate3d(0, -1em, 0) scale(1.1);
text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
}
}
/* LOGO*/
background:#000;
}
#logo:active {
position: relative;
top: 1px;
}
html {
height: 10;
background-color: #fff;
background-image: linear-gradient(135deg,#00BFFF, #00BFFF, #8A2BE2, #9932CC ,#9ACD32);
}
<div> <p align="center"> <i>M</i><i>Y</i><i>S</i><i>2</i><i>0</i><i>1</i><i>0</i> </div>
<p align="center"> <a href="http://demoshow-mys2010.blogspot.co.id/2016/02/logo-mys2010.html"> <img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png" name="e902" border="0" width="300" height="200" /></a> <font size="2" color=" green "face="Time newroman">CIBEBER CIMAHI</font></center>
<header> <div class="page-wrap clearfix"> <p align="center"> <font size="2" color="green"face="arial"> <a href="http://demoshow-mys2010.blogspot.co.id/2015/12/belajar-mp3-dengan-auto-slide.html" title="Myscript2010">WEB DESIGN MYSCRIPT2010 ANIMATED LOGO</a> <font size="2" color="#dad"face="arial">* * *</a> </header>
Edited by. Myscript2010 on Codepen
