简单的页面加载动画
html部分
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>加载动画</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div class="loading"></div></body></html>
css样式部分
body{margin: 0;padding: 0;background: #f1f1f1;}.loading{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(75deg);width: 15px;height: 15px;}.loading::before,.loading::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 15px;height: 15px;border-radius: 15px;animation: loading 1.5s infinite linear;}.loading::before{box-shadow: 15px 15px red,-15px -15px green;}.loading::after{box-shadow: 15px 15px blue,-15px -15px gray;transform: translate(-50%,-50%) rotate(90deg);}@keyframes loading {50%{height: 45px;}}
