Agregar en el HTML
<div id=container>
<div id=flip>
<div>
<div>REACT JS</div>
</div>
<div>
<div>VUE.JS</div>
</div>
<div>
<div>ANGULAR</div>
</div>
</div>
</div>
Agregar estilos en el CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
margin:0px;
font-family:'Roboto';
text-align:center;
}
#container {
color:#999;
text-transform: uppercase;
font-size:36px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:50px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
Parte de animación y agregar en el CSS.
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
Descargar
https://drive.google.com/open?id=1RiDA_0lSoDrwFdgaoqJ5CPjgctt6ahLE
How to add some div or element. Because it has only 3 divs or 3 elements:
«(1) REACT JS», «(2) VUE.JS» and «(3) ANGULAR».
Besides, it starts with the number 3, then the 2, and finishes with the 1.
I tryied in the html, and in the css, but I can achieve to add some extra element.
Can you help me, please?