106 lines
2.4 KiB
CSS
106 lines
2.4 KiB
CSS
/*计数器*/
|
|
.numCounter {
|
|
display: inline-block;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
text-shadow: 0 0 2rpx #FFF;
|
|
font-weight: bold;
|
|
white-space: normal;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.numCounter {
|
|
overflow: hidden;
|
|
padding: 0.4em;
|
|
text-align: center;
|
|
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
|
border-left: 0.5rpx solid rgba(255, 255, 255, 0.01);
|
|
border-radius: 1rem;
|
|
background: linear-gradient(330deg, #6fc4f6, #3ea2dc);
|
|
box-shadow: -1rem -1rem 3rem #308fc6, 1rem 1rem 3rem #7dcbf9;
|
|
}
|
|
|
|
.numCounter .div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: 100%;
|
|
}
|
|
|
|
.numCounter .div.title {
|
|
color: #fff;
|
|
}
|
|
|
|
.numCounter .div .text {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 100%;
|
|
margin: 0 0.1rem;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
text-shadow: 2rpx 1rpx 3rpx rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2rpx 2rpx 3rpx rgba(0, 0, 0, 0.1) inset, -2rpx -2rpx 2rpx rgba(255, 255, 255, 0.12) inset;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.numCounter .div .text.blur {
|
|
opacity: 0.8;
|
|
text-shadow: 2rpx 1rpx 3rpx rgba(0, 0, 0, 0.2), 0 0.1rem 2rpx rgba(255, 255, 255, 0.6), 0 0.3rem 3rpx rgba(255, 255, 255, 0.3), 0 -0.1rem 2rpx rgba(255, 255, 255, 0.6), 0 -0.3rem 3rpx rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.numCounter .div .text[data-value="1"]::before {
|
|
margin-top: -90rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="2"]::before {
|
|
margin-top: -180rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="3"]::before {
|
|
margin-top: -270rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="4"]::before {
|
|
margin-top: -360rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="5"]::before {
|
|
margin-top: -450rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="6"]::before {
|
|
margin-top: -540rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="7"]::before {
|
|
margin-top: -630rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="8"]::before {
|
|
margin-top: -720rpx;
|
|
}
|
|
|
|
.numCounter .div .text[data-value="9"]::before {
|
|
margin-top: -810rpx;
|
|
}
|
|
|
|
.numCounter .div:nth-last-child(3n):not(:first-child)::before {
|
|
content: ",";
|
|
display: inline;
|
|
font-size: 1.1rem;
|
|
opacity: 0.6;
|
|
color: white;
|
|
}
|
|
|
|
.numCounter .div .b::before {
|
|
content: " 0 1 2 3 4 5 6 7 8 9 ";
|
|
display: block;
|
|
word-break: break-all;
|
|
word-break: break-word;
|
|
transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
|
|
}
|
|
|
|
.numCounter .text {
|
|
background: #40aae8;
|
|
background: linear-gradient(-30deg, #62bff5, #2f99d7);
|
|
color: white;
|
|
} |