*{ margin: 0; position: 0 } body{ background-color: #333; } .father{ margin: 200px auto; border: 1px dashed #999; width: 1em; height: 1em; font-size: 120px; font-family: sans-serif; opacity: 0; overflow: hidden; position: relative; -webkit-animation: mysecond 6s; -o-animation: mysecond 6s; animation: mysecond 6s; } .son{ position: absolute; text-align: center; color: #f00; width: 1em; line-height: 1em; -webkit-animation: myfirst 6s steps(6); -o-animation: myfirst 6s steps(6); animation: myfirst 6s steps(6); } @-webkit-keyframes myfirst { 0% {left:0em;top:0px; } 100%{left:0em;top:-6em;} } @-o-keyframes myfirst { 0% {left:0em;top:0px; } 100%{left:0em;top:-6em;} } @-moz-keyframes myfirst { 0% {left:0em;top:0px; } 100%{left:0em;top:-6em;} } @keyframes myfirst { 0% {left:0em;top:0px; } 100%{left:0em;top:-6em;} } @-webkit-keyframes mysecond { 0% {opacity:1;} 84%{opacity:1;-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} 100% {opacity:0; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(360deg) scale(0.01); -moz-transform: rotate(360deg) scale(0.01); -ms-transform: rotate(360deg) scale(0.01); -o-transform: rotate(360deg) scale(0.01); transform: rotate(360deg) scale(0.01);} } @-o-keyframes mysecond { 0% {opacity:1;} 84%{opacity:1;-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} 100% {opacity:0; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(360deg) scale(0.01); -moz-transform: rotate(360deg) scale(0.01); -ms-transform: rotate(360deg) scale(0.01); -o-transform: rotate(360deg) scale(0.01); transform: rotate(360deg) scale(0.01); } } @-moz-keyframes mysecond { 0% {opacity:1;} 84%{opacity:1;-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} 100% {opacity:0; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(360deg) scale(0.01); -moz-transform: rotate(360deg) scale(0.01); -ms-transform: rotate(360deg) scale(0.01); -o-transform: rotate(360deg) scale(0.01); transform: rotate(360deg) scale(0.01); } } @keyframes mysecond { 0% {opacity:1;} 84%{opacity:1;-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} 100% {opacity:0; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(360deg) scale(0.01); -moz-transform: rotate(360deg) scale(0.01); -ms-transform: rotate(360deg) scale(0.01); -o-transform: rotate(360deg) scale(0.01); transform: rotate(360deg) scale(0.01); } }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css.css"> </head> <body> <div class="father"> <div class="son">5 4 3 2 1 0 0</div> </div> </body> </html>
倒计时 css实现
最新推荐文章于 2024-07-16 15:25:44 发布