css loadding 动画

LuWeiFun

于 2024-04-25 11:35:08 发布

阅读量95

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_60997870/article/details/138184526

版权

.loadding {
					height: 100%;
					overflow: hidden;
					position: relative;
					.load-9 {
						position: absolute;
						left: 50%;
						top: 40%;
						transform: translateY(-50%);
					}

					.text {
						margin-top: 30rpx;
					}

					.load-9 .spinner {
						animation: loadingI 2s linear infinite;
					}

					.bubble-1,
					.bubble-2 {
						position: absolute;
						top: 0;
						width: 25px;
						height: 25px;
						border-radius: 100%;
						background-color: #4b9cdb;
					}

					.bubble-2 {
						top: auto;
						bottom: 0;
					}

					.load-9 .bubble-1,
					.load-9 .bubble-2 {
						animation: bounce 2s ease-in-out infinite;
					}

					.load-9 .bubble-2 {
						animation-delay: -1s;
					}

					@keyframes loadingI {
						100% {
							transform: rotate(360deg);
						}
					}

					@keyframes bounce {

						0%,
						100% {
							transform: scale(0);
						}

						50% {
							transform: scale(1);
						}
					}
				}