Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um Ladeanimationseffekte zu erzielen
CSS-Implementierung zum Laden von Animationen hat den folgenden Effekt:
HTML
<div class="ui-loading-wrap"> <p>加载中</p> <i class="ui-loading"></i> </div>
CSS
.ui-loading-wrap { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align: center; height: 40px; .ui-loading { width: 20px; height: 20px; display: block; background: url(../img/loading_sprite.png); -webkit-background-size: auto 20px; -webkit-animation: am-rotate 1s steps(12) infinite; @-webkit-keyframes am-rotate { from { background-position: 0 0 } to { background-position: -240px 0 } }
BildAdresse:
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um Ladeanimationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!