css loadding 动画

最新推荐文章于 2025-01-15 23:36:52 发布

LuWeiFun

最新推荐文章于 2025-01-15 23:36:52 发布

阅读量171

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/m0_60997870/article/details/138184526

版权

文章描述了如何使用CSS和关键帧动画技术在网页加载过程中创建动态的圆圈旋转和上下弹跳的视觉效果，以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.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);
						}
					}
				}