You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

149 lines
2.7 KiB

.tabbar-box {
width: 100%;
position: fixed;
bottom: 0;
height: 150rpx;
background: rgba(255, 255, 255, 1);
margin: 0 auto;
display: flex;
z-index: 999;
border-top: 1px solid #eee;
border-top-left-radius: 60rpx;
border-top-right-radius: 60rpx;
}
.bar-box {
height: 100%;
flex: 1;
}
.img-box {
width: 50rpx;
height: 50rpx;
margin: 20rpx auto 10rpx;
cursor: pointer;
display: block;
transition: all 0.3s;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-user-select: none;
user-select: none;
}
.img-box ._img{
width: 50rpx;
height: 50rpx;
background-size: 100%;
}
.big-img-box ._img{
width: 80%;
height: 90%;
background-size: 100%;
margin: -20rpx 0 0 10%;
}
@-webkit-keyframes simple-scale-shake {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
20% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
30% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
40% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
60% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
70% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
90% {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes simple-scale-shake {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
20% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
30% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
40% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
60% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
70% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
90% {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.shaking {
-webkit-animation: simple-scale-shake 0.8s ease-out;
animation: simple-scale-shake 0.8s ease-out;
}
.text-box {
text-align: center;
font-size: 20rpx;
font-family: 'PingFang HK';
font-weight: bold;
}
.big-img-box{
width: 100%;
height: 100%;
}