<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>圆形旋转loading</title> ???????<style type="text/css"> ???????????*{ ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????.box{ ???????????????width: 50px; ???????????????height:50px; ???????????????margin: 100px; ???????????????position: absolute; ???????????} ???????????.box:nth-of-type(2){ ???????????????transform: rotate(45deg); ???????????} ???????????.box p{ ???????????????width: 15px; ???????????????height: 15px; ???????????????background: #0000FF; ???????????????border-radius: 50%; ???????????????position: absolute; ???????????????animation: run 1.5s infinite linear; ???????????} ???????????.box p:nth-of-type(1){ /*左上*/ ???????????????left: 0; ???????????????top: 0; ???????????} ???????????.box p:nth-of-type(2){ /*右上*/ ???????????????right: 0; ???????????????top: 0; ???????????} ???????????.box p:nth-of-type(3){ /*左下*/ ???????????????left: 0; ???????????????bottom: 0; ???????????} ???????????.box p:nth-of-type(4){ /*右下*/ ???????????????right: 0; ???????????????bottom: 0; ???????????} ???????????/*动画效果*/ ???????????@keyframes run{ ???????????????0%{ ???????????????????transform: scale(0); ???????????????} ???????????????50%{ ???????????????????transform: scale(1); ???????????????} ???????????????100%{ ???????????????????transform: scale(0); ???????????????} ???????????} ???????????/*延迟动画效果 ??负值是解决蹦动的效果*/ ???????????.box:nth-of-type(1) p:nth-of-type(1){ ???????????????animation-delay: -0.1s; ???????????} ???????????.box:nth-of-type(2) p:nth-of-type(1){ ???????????????animation-delay: -0.3s; ???????????} ???????????.box:nth-of-type(1) p:nth-of-type(2){ ???????????????animation-delay: -0.5s; ???????????} ???????????.box:nth-of-type(2) p:nth-of-type(2){ ???????????????animation-delay: -0.7s; ???????????} ???????????.box:nth-of-type(1) p:nth-of-type(3){ ???????????????animation-delay: -0.9s; ???????????} ???????????.box:nth-of-type(2) p:nth-of-type(3){ ???????????????animation-delay: -1.1s; ???????????} ???????????.box:nth-of-type(1) p:nth-of-type(4){ ???????????????animation-delay: -1.3s; ???????????} ???????????.box:nth-of-type(2) p:nth-of-type(4){ ???????????????animation-delay: -1.5s; ???????????} ???????</style> ???</head> ???<body> ???????<div class="box"> ???????????<p></p> ???????????<p></p> ???????????<p></p> ???????????<p></p> ???????</div> ???????<div class="box"> ???????????<p></p> ???????????<p></p> ???????????<p></p> ???????????<p></p> ???????</div> ???</body></html>css3纯手写loading效果
原文地址：https://www.cnblogs.com/lhl66/p/8975639.html