Team:SVCE Chennai/CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500); html, body {
margin: 0; background: #f1f1f1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a:link, a:visited {
text-decoration: none;
}
.sign {
text-align: center; font-size: 14px; font-family: 'Roboto'; color: #777; font-weight: 300; transition: color 0.3s;
} .sign:hover {
color: #333; transition: color 0.3s;
}
.head {
margin: 0; text-align: center; padding: 50px; font-size: 20px; font-family: 'Roboto'; color: #555; margin-left: 20px;
} .head i {
display: inline-block; position: absolute; margin-left: -30px;
} .head span {
font-size: 15px; font-weight: 300; color: #888;
}
- container {
display: table; margin: 10px auto; width: 350px; height: 320px; position: relative;
}
- container span {
position: absolute; width: 50px; height: 50px; border-radius: 50%; position: absolute; margin: auto; top: 0; bottom: 0; transition: all 0.3s;
}
- container span:first-child {
background: #4285F4;
}
- container span:nth-child(2) {
background: #DB4437; left: 100px;
}
- container span:nth-child(3) {
background: #F4B400; left: 200px;
}
- container span:nth-child(4) {
background: #0F9D58; left: 300px;
}
@keyframes updown {
0% { top: 0; } 50% { top: 15px; } 100% { top: -15px; }
} @keyframes sound-1 {
0% { height: 280px; border-radius: 30px; } 10% { height: 190px; border-radius: 30px; } 20% { height: 260px; border-radius: 30px; } 25% { height: 180px; border-radius: 30px; } 30% { height: 280px; border-radius: 30px; } 40% { height: 190px; border-radius: 30px; } 50% { height: 160px; border-radius: 30px; } 60% { height: 130px; border-radius: 30px; } 70% { height: 100px; border-radius: 30px; } 80% { height: 130px; border-radius: 30px; } 85% { height: 100px; border-radius: 30px; } 90% { height: 130px; border-radius: 30px; } 95% { height: 100px; border-radius: 30px; } 100% { height: 50px; border-radius: 50%; }
} @keyframes sound-2 {
0% { height: 180px; border-radius: 30px; } 20% { height: 120px; border-radius: 30px; } 30% { height: 180px; border-radius: 30px; } 40% { height: 120px; border-radius: 30px; } 50% { height: 110px; border-radius: 30px; } 60% { height: 90px; border-radius: 30px; } 70% { height: 70px; border-radius: 30px; } 80% { height: 90px; border-radius: 30px; } 90% { height: 70px; border-radius: 30px; } 100% { height: 50px; border-radius: 50%; }
} @keyframes finalani {
0% { top: 0; } 50% { top: -250px; } 100% { top: 0px; }
}