瀏覽代碼

修改动画效果

tanxue 4 月之前
父節點
當前提交
a8f5749542
共有 1 個文件被更改,包括 18 次插入24 次删除
  1. 18 24
      common/styles/global/pages.scss

+ 18 - 24
common/styles/global/pages.scss

@@ -245,23 +245,10 @@
 	}
 	// animal
 	.animal-img{width:48rpx;height: 68rpx;@include ezy-no-repeat-cover;position: absolute;}
-	@keyframes shakeDan {
-		0% {transform: translateX(0) scale(1);}
-		25% {transform: rotate(-20deg);}
-		50% {transform: rotate(20deg);}
-		75% {transform: rotate(0deg) scale(1.2);}
-		100% {transform: rotate(0deg) scale(1);}
-	}
-	@keyframes shakeE {
-		0% {transform: translateX(0);}
-		25% {transform: rotate(-8deg);}
-		75% {transform: rotate(8deg);}
-		100% {transform: rotate(0deg);}
-	}
-	.dan-img{background-image: url("@/static/images/study/animal-img1.png");animation: shakeDan 3s infinite;}
-	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");animation: shakeE 3s infinite;}
-	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");animation: shakeE 3s infinite;}
-	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");animation: shakeE 3s infinite;}
+	.dan-img{background-image: url("@/static/images/study/animal-img1.png");}
+	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");}
+	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");}
+	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");}
 }
 // 数学
 .ezy-shuxue-study-page{
@@ -299,8 +286,11 @@
 	}
 	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
 	
-	// animal
-	.animal-img{left: 28%;top: 48%;}
+	.animal-img{left: 28%;top: 48%;animation: shakeOpacity 1s 1;}
+	@keyframes shakeOpacity {
+		0% {opacity: 0;}
+		100% {opacity: 1;;}
+	}
 	
 	// brand-item
 	.brand-item{box-sizing: border-box;font-size: 24rpx;color: #fff;text-align: center;
@@ -434,29 +424,33 @@
 	.brand-active {
 		.icon-content-box{background-image: url("@/static/images/study/yingyu/dao-item-active.png");}
 	}
+	@keyframes shakeOpacity {
+		0% {opacity: 0;}
+		100% {opacity: 1;;}
+	}
 	.brand-item:nth-child(1){
 		width: 317rpx;height: 240rpx;top:630rpx;right:30rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj1.png");
 		.icon-content-box{top: 160rpx;right: 0rpx;}
 		.brand-lock,.brand-finish-icon{top: 98rpx;right: 60rpx;}
-		.animal-img{top: 88rpx;right: 40rpx;}
+		.animal-img{top: 88rpx;right: 40rpx;animation: shakeOpacity 1s 1;}
 	}
 	.brand-item:nth-child(2){
 		width: 394rpx;height: 192rpx;top:760rpx;left:55rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj2.png");
 		.icon-content-box{top: 130rpx;right: 130rpx;}
 		.brand-lock,.brand-finish-icon{top: 62rpx;right: 200rpx;}
-		.animal-img{top: 60rpx;right: 180rpx;}
+		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
 	}
 	.brand-item:nth-child(3){
 		width: 385rpx;height: 154rpx;top:980rpx;right:110rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj3.png");
 		.icon-content-box{top: 100rpx;right: 0rpx;}
 		.brand-lock,.brand-finish-icon{top: 28rpx;right: 60rpx;}
-		.animal-img{top: 20rpx;right: 30rpx;}
+		.animal-img{top: 20rpx;right: 30rpx;animation: shakeOpacity 1s 1;}
 		}
 	.brand-item:nth-child(4){
 		width: 385rpx;height: 202rpx;top:1100rpx;left:60rpx;background-image: url("@/static/images/study/yingyu/dao-item-bj4.png");
 		.icon-content-box{top: 130rpx;right: 130rpx;}
 		.brand-lock,.brand-finish-icon{top: 62rpx;right: 200rpx;}
-		.animal-img{top: 60rpx;right: 180rpx;}
+		.animal-img{top: 60rpx;right: 180rpx;animation: shakeOpacity 1s 1;}
 	}
 	.brand-item.ceshi-brand-item{
 		width: 308rpx;height: 225rpx;top:1250rpx;right:30rpx;left: unset;@include ezy-no-repeat-cover;
@@ -464,7 +458,7 @@
 		.icon-content-box{background-image: unset;}
 		.brand-content{display: none;}
 		.brand-lock,.brand-finish-icon{top: 120rpx;right: 120rpx;}
-		.animal-img{top: 100rpx;right: 40rpx;}
+		.animal-img{top: 100rpx;right: 40rpx;animation: shakeOpacity 1s 1;}
 	}
 	
 	@media (max-height: 800px) {