| | |
|---|
| | | max-width: 200px;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | <style>
|
|---|
| | | .parentBox {
|
|---|
| | | height: 100%;
|
|---|
| | | /* background: rgb(31, 31, 31); */
|
|---|
| | | padding: 20px;
|
|---|
| | | }
|
|---|
| | | .loadBox .loaderContantBox {
|
|---|
| | | color: white;
|
|---|
| | | font-size: 40px;
|
|---|
| | | overflow: hidden;
|
|---|
| | | width: 40px;
|
|---|
| | | height: 40px;
|
|---|
| | | border-radius: 50%;
|
|---|
| | | transform: translateZ(0);
|
|---|
| | | /* animation：规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放 */
|
|---|
| | | animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | @keyframes loadBox {
|
|---|
| | | 0% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
|---|
| | | 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 5%,
|
|---|
| | | 95% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
|---|
| | | 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 10%,
|
|---|
| | | 59% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
|
|---|
| | | -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
|
|---|
| | | -0.297em -0.775em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 20% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
|
|---|
| | | -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
|
|---|
| | | -0.749em -0.34em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 38% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
|
|---|
| | | -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
|
|---|
| | | -0.82em -0.09em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 100% {
|
|---|
| | | box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
|
|---|
| | | 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | @keyframes round {
|
|---|
| | | 0% {
|
|---|
| | | transform: rotate(0deg); /* 开始旋转 div 元素 */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 100% {
|
|---|
| | | transform: rotate(360deg); /* 结束旋转 div 元素 */
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
