先上图

html代码
1 2 3 4 5
| <div class="container"> <div class="trans"> <span>加载中...</span> </div> </div>
|
其中container
是背景,trans
是加载是旋转的正方形
CSS基本样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| * { margin: 0; padding: 0; }
html, body { width: 100%; height: 100vh; }
.container { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #37474F; }
.trans { position: absolute; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #37474F; }
span { position: absolute; color: #fff; z-index: 1; }
|
实现后的效果:

实现旋转框样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| .trans::after { content: ""; position: absolute; width: 115px; height: 115px; background: #37474F; border: 4px solid #3ff9dc; transform: rotate(45deg); animation: rotate1 3s ease-in-out infinite alternate; }
.trans::before { content: ""; position: absolute; width: 115px; height: 115px; border: 4px solid #ffab91; transform: rotate(-45deg); animation: rotate2 3s ease-in-out infinite alternate; }
|
实现后的效果:

添加旋转动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| @keyframes rotate1 { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } }
@keyframes rotate2 { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
|
最终效果:Loading animation
整体代码
html文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>加载动画</title> </head>
<body> <div class="container"> <div class="trans"> <span>加载中...</span> </div> </div> </body>
</html>
|
CSS文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
| * { margin: 0; padding: 0; }
html, body { width: 100%; height: 100vh; }
.container { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #37474F; }
.trans { position: absolute; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; background: #37474F; }
span { position: absolute; color: #fff; z-index: 1; }
.trans::after { content: ""; position: absolute; width: 115px; height: 115px; background: #37474F; border: 4px solid #3ff9dc; transform: rotate(45deg); animation: rotate1 3s ease-in-out infinite alternate; }
.trans::before { content: ""; position: absolute; width: 115px; height: 115px; border: 4px solid #ffab91; transform: rotate(-45deg); animation: rotate2 3s ease-in-out infinite alternate; }
@keyframes rotate1 { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } }
@keyframes rotate2 { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
|