|
@@ -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) {
|