css加载动画...

 1 加载动画... 2 ?3 ??4 ?5 <p>加载动画...</p> 6 <p> </p> 7 <p> </p> 8 <style><!-- 9 .container {10 ????????position: absolute;11 ????????top: 0;12 ????????left: 0;13 ????????bottom: 0;14 ????????right: 0;15 ????????display: flex;16 ????????align-items: center;17 ????????justify-content: center;18 ??????}19 20 ??????/* Loading CSS 样式 */ 21 ??????22 ????????.boxLoading { ?23 ??????????width: 50px;24 ??????????height: 50px;25 ??????????margin: auto;26 ??????????position: absolute;27 ??????????left: 0;28 ??????????right: 0;29 ??????????top: 0;30 ??????????bottom: 0;31 ????????}32 ??????33 ??????.boxLoading:before {34 ????????content: ‘‘;35 ????????width: 50px;36 ????????height: 5px;37 ????????background: #000;38 ????????opacity: 0.1;39 ????????position: absolute;40 ????????top: 59px;41 ????????left: 0;42 ????????border-radius: 50%;43 ????????animation: box-loading-shadow 0.5s linear infinite;44 ??????}45 ??????.boxLoading:after {46 ????????content: ‘‘;47 ????????width: 50px;48 ????????height: 50px;49 ????????background: -webkit-linear-gradient(270deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);50 ????????background: -moz-linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);51 ????????background: linear-gradient(180deg, rgba(33, 127, 199, 1) 0%, rgba(33, 127, 199, 1) 0%, rgba(52, 152, 228, 1) 100%, rgba(52, 152, 228, 1) 100%);52 ????????animation: box-loading-animate 0.5s linear infinite;53 ????????position: absolute;54 ????????top: 0;55 ????????left: 0;56 ????????border-radius: 3px;57 ??????}58 ????????59 ??????@keyframes box-loading-animate {60 ????????17% {61 ??????????border-bottom-right-radius: 3px;62 ????????}63 ????????25% {64 ??????????transform: translateY(9px) rotate(22.5deg);65 ????????}66 ????????50% {67 ??????????transform: translateY(18px) scale(1, .9) rotate(45deg);68 ??????????border-bottom-right-radius: 40px;69 ????????}70 ????????75% {71 ??????????transform: translateY(9px) rotate(67.5deg);72 ????????}73 ????????100% {74 ??????????transform: translateY(0) rotate(90deg);75 ????????}76 ??????}77 ????????78 ??????@keyframes box-loading-shadow {79 ????????0%, 100% {80 ??????????transform: scale(1, 1);81 ????????}82 ????????50% {83 ??????????transform: scale(1.2, 1);84 ????????}85 ??????}86 --></style>87 <div class="container"><!-- Loading HTML-->88 <div class="boxLoading"> </div>89 </div>90