<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>css animation</title> ?<style> ???body { ?????background-color: gray; ???} ???@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } ???@-webkit-keyframes spin { 100% { -webkit-transform: ?rotate(360deg); } } ???@keyframes spin { 100% { -webkit-transform: ?rotate(360deg); transform: rotate(360deg); } } ???.preloader { ?????animation-name: spin; ?????animation-duration: .5s; ?????animation-timing-function: linear; ?????-webkit-animation-delay: 0s; ?????animation-animation-delay: 0s; ?????animation-iteration-count: infinite; ?????animation-direction: normal; ?????animation-fill-mode: none; ?????animation-play-state: running; ?????border: 2px solid transparent; ?????border-top: 2px solid #fff; ?????border-left: 2px solid #fff; ?????border-radius: 50px; ?????opacity: 1; ?????width: 32px; ?????height: 32px; ?????cursor: wait; ?????display: block; ?????transition: all 400ms ease !important; ?????-webkit-animation: spin .6s linear infinite; ?????-o-animation: spin .6s linear infinite; ?????animation: spin .6s linear infinite; ???} ???#animation { ???} ?</style></head><body><div id="animation" class="preloader"></div></body></html>
使用 css 的 keyframe 实现 loading 动画
原文地址：https://www.cnblogs.com/eleven24/p/8648839.html