MARVEL
MARVEL
MARVEL
html { height:100%; } body { height:100%; display:flex; justify-content:center; align-items:center; background:rgb(196,14,14); margin:0 auto; } main { width:400px; height:230px; border:10px solid white; position:relative; cursor:pointer; } main div { width:100%; height:100%; position:absolute; font-size:100px; text-align:center; line-height:230px; font-family:黑体; font-weight:bold; } .first { color:white; } .second { width:0px; position:absolute; overflow:hidden; background:white; transition:4s; animation:one 5s ease-in-out 1; animation-fill-mode:both; } .seconds { color:rgb(196,14,14); width:400px; } @keyframes one { 0% { width:0px; } 25% { width:50px; } 50% { width:150px; } 100% { width:400px; } }.three { width:0px; background:rgb(224,9,9); overflow:hidden; right:0; animation:two 5s linear 1; animation-fill-mode:both; animation-delay:5s; } @keyframes two { 0% { width:0px; } 100% { width:200px; } }.threes { width:400px; color:white; position:absolute; animation:twos 5s linear 1; animation-fill-mode:both; animation-delay:5s; } @keyframes twos { 0% { left:-400px; } 100% { left:-200px; } }