Animasi drop teks
<!DOCTYPE html>
<html>
<head>
<title>Belajar koding informatika MAN Kapuas</title>
<styl>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
body {
margin:0px;
text-align:center;
padding-top:43vh;
color:#fff;
font-family:'Roboto';
font-size:36px;
font-weight:100;
overflow:hidden;
animation:bg 5s linear infinite;
}
.dropping-texts {
display: inline-block;
width: 180px;
text-align: left;
height: 36px;
vertical-align: -2px;
}
.dropping-texts > div {
font-size:0px;
opacity:0;
margin-left:-30px;
position:absolute;
font-weight:300;
box-shadow: 0px 60px 25px -20px rgba(0,0,0,0.5);
}
.dropping-texts > div:nth-child(1) {
animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
animation: roll 5s linear infinite 1s;
}
.dropping-texts > div:nth-child(3) {
animation: roll 5s linear infinite 2s;
}
.dropping-texts > div:nth-child(4) {
animation: roll2 5s linear infinite 3s;
}
@keyframes roll {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
20% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
27% {
font-size:0px;
opacity:0.5;
margin-left:20px;
margin-top:100px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes roll2 {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(-25deg);
}
3% {
opacity:1;
transform: rotate(0deg);
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
30% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
transform: rotate(0deg);
}
37% {
font-size:1500px;
opacity:0;
margin-left:-1000px;
margin-top:-800px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
transform: rotate(15deg);
}
}
@keyframes bg {
0% {background: #ff0075;}
3% {background: #0094ff;}
20% {background: #0094ff;}
23% {background: #b200ff;}
40% {background: #b200ff;}
43% {background: #8BC34A;}
60% {background: #8BC34A;}
63% {background: #F44336;}
80% {background: #F44336;}
83% {background: #F44336;}
100% {background: #F44336;}
}
</style>
</head>
<body>
INFORMATIKA MAN KAPUAS
<div class="dropping-texts">
<div>Developers</div>
<div>Designers</div>
<div>Coders</div>
<div>EVERYONE!</div>
</div>
</body>
</html>
0 komentar: