样式:
<style>
@-webkit-keyframes flipTop {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
background-color: #ffdcdc;
}
100% {
-webkit-transform: perspective(400px) rotateX(-90deg);
background-color: #fff4f4;
}
}
@-webkit-keyframes flipBottom {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
}
}
@-moz-keyframes flipTop {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
background-color: #ffdcdc;
}
100% {
-webkit-transform: perspective(400px) rotateX(-90deg);
background-color: #fff4f4;
}
}
@-moz-keyframes flipBottom {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
}
}
@-ms-keyframes flipTop {
0% {
-ms-transform: perspective(400px) rotateX(0deg);
}
100% {
-ms-transform: perspective(400px) rotateX(-90deg);
}
}
@-ms-keyframes flipBottom {
0% {
-ms-transform: perspective(400px) rotateX(90deg);
}
100% {
-ms-transform: perspective(400px) rotateX(0deg);
}
}
.flipTimer {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 0.373rem;
height: 0.68rem;
color: #ff4b5c;
display: inline-block;
}
[data-dpr='1'] .flipTimer{
font-size: 14px;
}
[data-dpr='2'] .flipTimer{
font-size: 28px;
}
[data-dpr='3'] .flipTimer{
font-size: 42px;
}
.flipTimer .digit-set {
border-radius: .133333rem;
width: .506667rem;
height: 100%;
display: inline-block;
position: relative;
border-radius: .053333rem;
-webkit-box-shadow: 0 .04rem .066667rem #ffa1a1;
-moz-box-shadow: 0 .04rem .066667rem #ffa1a1;
box-shadow: 0 .04rem .066667rem #ffa1a1;
}
.flipTimer .digit {
position: absolute;
height: 100%;
width: 100%;
display:block;
}
.flipTimer .digit > div {
position: absolute;
left: 0;
overflow: hidden;
height: 50%;
width: 100%;
display: block;
}
.flipTimer .digit > div.digit-top, .flipTimer .digit > div.shadow-top {
background-color: #fff4f4;
box-sizing: border-box;
top: 0;
z-index: 0;
}
.flipTimer .digit > div.digit-top:before, .flipTimer .digit > div.shadow-top:before {
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.flipTimer .digit > div.shadow-top {
opacity: 0;
-webkit-transition: opacity 0.3s ease-in;
}
.flipTimer .digit > div.digit-bottom, .flipTimer .digit > div.shadow-bottom {
background-color: #fff4f4;
bottom: 0;
z-index: 0;
}
.flipTimer .digit > div.digit-bottom .digit-wrap, .flipTimer .digit > div.shadow-bottom .digit-wrap {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.digit-wrap{
padding-top: 1px;
display: table-cell;
text-align: center;
width: .506667rem;
height: 0.68rem;
line-height: 1;
vertical-align: middle;
}
.flipTimer .digit > div.digit-bottom:before, .flipTimer .digit > div.shadow-bottom:before {
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.flipTimer .digit > div.shadow-bottom {
opacity: 0;
-webkit-transition: opacity 0.3s ease-in;
}
.flipTimer .digit.previous .digit-top,
.flipTimer .digit.previous .shadow-top {
opacity: 1;
z-index: 2;
-webkit-transform-origin: 50% 100%;
-webkit-animation: flipTop 0.3s ease-in both;
-moz-transform-origin: 50% 100%;
-moz-animation: flipTop 0.3s ease-in both;
-ms-transform-origin: 50% 100%;
-ms-animation: flipTop 0.3s ease-in both;
transform-origin: 50% 100%;
animation: flipTop 0.3s ease-in both;
}
.flipTimer .digit.previous .digit-bottom,
.flipTimer .digit.previous .shadow-bottom {
z-index: 1;
opacity: 1;
}
.flipTimer .digit.active .digit-top {
z-index: 1;
background-color: #ffdcdc;
border-radius: .053333rem;
}
.flipTimer .digit.active .digit-bottom {
z-index: 2;
-webkit-transform-origin: 50% 0%;
-webkit-animation: flipBottom 0.3s 0.3s ease-out both;
-moz-transform-origin: 50% 0%;
-moz-animation: flipBottom 0.3s 0.3s ease-out both;
-ms-transform-origin: 50% 0%;
-ms-animation: flipBottom 0.3s 0.3s ease-out both;
transform-origin: 50% 0%;
animation: flipBottom 0.3s 0.3s ease-out both;
}
/*延迟*/
.delay1 .digit-top,.delay1 .shadow-top,.delay1 .digit-bottom{
animation-delay:600ms !important;
-webkit-animation-delay:600ms !important;
}
.delay2 .digit-top,.delay2 .shadow-top,.delay2 .digit-bottom{
animation-delay:800ms !important;
-webkit-animation-delay:800ms !important;
}
.delay3 .digit-top,.delay3 .shadow-top,.delay3 .digit-bottom{
animation-delay:1000ms !important;
-webkit-animation-delay:1000ms !important; /* Safari 和 Chrome */
}
</style>
html
<div class="flipTimer">
<div class="digit-set">
<div class="digit jsTop active">
<div class="digit-top">
<span class="digit-wrap">0</span>
</div>
<div class="shadow-top"></div>
<div class="digit-bottom">
<span class="digit-wrap">0</span>
</div>
<div class="shadow-bottom"></div>
</div>
<div class="digit jsBm previous">
<div class="digit-top">
<span class="digit-wrap"></span>
</div>
<div class="shadow-top"></div>
<div class="digit-bottom">
<span class="digit-wrap"></span>
</div>
<div class="shadow-bottom"></div>
</div>
</div>
</div>
js动画调用:
function run(el,num){
el.find(".previous .digit-wrap").html(num);
var top = el.find(".jsTop"),
bm = el.find(".jsBm")
if (top.hasClass("previous")) {
top.addClass("active").removeClass("previous");
bm.addClass("previous").removeClass("active");
} else {
top.addClass("previous").removeClass("active");
bm.addClass("active").removeClass("previous");
}
}