標籤：abs images blog idt src color absolute key tle
html代碼
<!DOCTYPE html><html><head> <title></title></head><body><style type="text/css"> .load2 { position: absolute; width:200px; height:160px; background: url(‘data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNDgiIGN5PSIxMi40NjMiIGZpbGw9IiNEM0U2RkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjQ3Ljg5IiByeT0iMTIuMzY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDM4KSIvPjwvc3ZnPg==‘) no-repeat; margin-left:-96px; margin-top:-100px; left:50%; top:70%; animation:small .8s infinite; background-position: center; } @keyframes small { 0% { transform: scale(1); } 50% { transform: scale(.4); } 100% { transform: scale(1); } } .load { position: absolute; left:50%; top:50%; background: url(‘loading.png‘); height:100px; width:100px; margin-left:-50px; margin-top:-50px; animation:test 4.5s steps(6) infinite,updown .8s infinite; /*-webkit-animation:test 3.5s steps(6) infinite;*/ } @keyframes test { 0% { background-position: 0 0; } 100% { background-position: 0 600px; } } @keyframes updown{ 0% { transform: translateY(0px); } 50% { transform: translateY(-50px); } 100% { transform: translateY(0px); } }</style><div class="load"></div><div class="load2"></div> </div></body></html>
css3 animation steps製作餓了麼loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
