Fix(AI):[#3595]热门词条轮播方式使用配置

2025-04-09 11:47:40 +08:00
parent fd4adbf383
commit 4810aa7e33
2 changed files with 163 additions and 4 deletions
@@ -672,6 +672,153 @@ page {
 		opacity: 0.0;
 	}
 }
+/*==================首页跑马灯效果动画====================*/
+// todo:用循环函数生成存在语法报错At-rule options not recognised，后期再仔细阅读官方文档，解决@keyframes关键字问题
+@keyframes TranslateXSwiper-15 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 0.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-20 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 1rpx);
+	}
+}
+@keyframes TranslateXSwiper-25 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 1.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-30 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 2rpx);
+	}
+}
+@keyframes TranslateXSwiper-35 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 2.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-40 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 3rpx);
+	}
+}
+@keyframes TranslateXSwiper-45 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 3.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-50 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 4rpx);
+	}
+}
+@keyframes TranslateXSwiper-55 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 4.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-60 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 5rpx);
+	}
+}
+@keyframes TranslateXSwiper-65 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 5.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-70 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 6rpx);
+	}
+}
+@keyframes TranslateXSwiper-75 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 6.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-80 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 7rpx);
+	}
+}
+@keyframes TranslateXSwiper-85 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 7.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-90 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 8rpx);
+	}
+}
+@keyframes TranslateXSwiper-95 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 8.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-100 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 9rpx);
+	}
+}
+
 .loader-wrap {
 	transform: scale(1);
 }