<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .loading { 420px; height: 420px; margin: 0 auto; background-image: url("https://gw.alicdn.com/imgextra/i1/O1CN01HK5GIa1JcwahRfzy8_!!6000000001050-2-tps-840-840.png"); background-size: 840px 840px; background-repeat: no-repeat; animation-name: successAn; animation-duration: 0.96s; animation-delay: 0s; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-timing-function: steps(1); position: relative; z-index: 2; } .bg { position: absolute; left: 50%; top: 89px; 503px; height: 219px; background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN017oRQvS1nxxERrUbGm_!!6000000005157-2-tps-503-219.png); background-size: contain; background-repeat: no-repeat; margin-left: -251px; z-index: 1; } @keyframes successAn { 0% { } 8.33% { background-position: -420px 0px; } 16.67% { background-position: 0px -420px; } 25.00% { background-position: -420px -420px; } 33.33% { background-image: url("https://gw.alicdn.com/imgextra/i1/O1CN0150XXvB246EEn0UXZM_!!6000000007341-2-tps-840-840.png"); background-position: 0px 0px; } 41.67% { background-position: -420px 0px; } 50.00% { background-position: 0px -420px; } 58.33% { background-position: -420px -420px; } 66.67% { background-image: url("https://gw.alicdn.com/imgextra/i3/O1CN01LmBZas1jxGAMdzD8T_!!6000000004614-2-tps-840-840.png"); background-position: 0px 0px; } 75.00% { background-position: -420px 0px; } 83.33% { background-position: 0px -420px; } 91.67%, 100% { background-position: -420px -420px; } } </style> </head> <body> <div class="loading"></div> <div class="bg"></div> </body> </html>