简单又别致的环形加载动画（HTML+CSS）
简单的环形
HTML代码
<!DOCTYPE html> <html> <head> <meta http-equiv=content-type content=text/html; charset=utf-8> <meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no> <title>简单又别致的环形加载动画</title> <link rel=stylesheet href=huanhuan.css> </head> <body> <div class=loader> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> CSS代码
*{ margin: 0; padding: 0; } body{ /* 100%窗口高度 */ height: 100vh; /* 弹性布局 水平+垂直居中 */ display: flex; justify-content: center; align-items: center; /* 渐变背景 */ background: linear-gradient(15deg,#f7bfd1,#7efbf7); } .loader{ width: 200px; height: 200px; /* 相对定位 */ position: relative; } .loader div{ border-width: 2px; /*border-style: solid;*/ border-style:dotted solid double dashed; border-left-color: #f8c92b; border-right-color: #ff964e; border-top-color: transparent; border-bottom-color: transparent; border-radius: 70%; /* 绝对定位 */ position: absolute; /* 执行动画：动画名 时长 慢速开始然后变快然后慢速结束 无限次播放 */ animation: spin 2s ease infinite; } /* 为每一个圆环设置大小、定位、动画延迟时间 */ .loader div:nth-child(1){ width: 50px; height: 50px; left: 70px; top: 70px; } .loader div:nth-child(2){ width: 70px; height: 70px; left: 60px; top: 60px; /* 动画延迟时间 */ animation-delay: 1s; } .loader div:nth-child(3){ width: 90px; height: 90px; left: 50px; top: 50px; animation-delay:2s; } .loader div:nth-child(4){ width: 110px; height: 110px; left: 40px; top: 40px; animation-delay: 3s; } /* 定义动画 */ @keyframes spin { 50%{ transform: rotate(180deg); } 100%{ transform: rotate(0); } }