原生js+css实现卡片上下翻转数字时钟效果代码-html代码-BFW代码库

原生js+css实现卡片上下翻转数字时钟效果代码

代码语言：html

所属分类：其他

代码描述：原生js+css实现卡片上下翻转数字时钟效果代码，可设置单个数字卡片上下翻转控制。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
     .single-demo {
        margin:50px auto;
        padding:30px;
        width:600px;
        text-align:center;
        border:solid 1px #999;
}
.flip {
        display:inline-block;
        position:relative;
        width:60px;
        height:100px;
        line-height:100px;
        border:solid 1px #000;
        border-radius:10px;
        background:#fff;
        font-size:66px;
        color:#fff;
        box-shadow:0 0 6px rgba(0,0,0,.5);
        text-align:center;
        font-family:"Helvetica Neue"
}
.flip .digital:before,.flip .digital:after {
        content:"";
        position:absolute;
        left:0;
        right:0;
        background:#000;
        overflow:hidden;
        box-sizing:border-box;
}
.flip .digital:before {
        top:0;
        bottom:50%;
        border-radius:10px 10px 0 0;
        border-bottom:solid 1px #666;
}
.flip .digital:after {
        top:50%;
        bottom:0;
        border-radius:0 0 10px 10px;
        line-height:0;
}
.flip.down .front:before {
        z-index:3;
}
.flip.down .back:after {
        z-index:2;
        transform-origin:50% 0%;
        transform:perspective(160px) rotateX(180deg);
}
.flip.down .front:after,.flip.down .back:before {
        z-index:1;
}
.flip.down.go .front:before {
        transform-origin:50% 100%;
        animation:frontFlipDown 0.6s ease-in-out both;
        box-shadow:0 -2px 6px rgba(255,255,255,0.3);
        backface-visibility:hidden;
}
.flip.down.go .back:after {
        animation:backFlipDown 0.6s ease-in-out both;
}
.flip.up .front:after {
        z-index:3;
}
.flip.up .back:before {
        z-index:2;
        transform-origin:50% 100%;
        transform:perspective(160px) rotateX(-180deg);
}
.flip.up .front:before,.flip.up .back:after {
        z-index:1;
}
.flip.up.go .front:after {
        transform-origin:50% 0;
        animation:frontFlipUp 0.6s ease-in-out both;
        box-shadow:0 2px 6px rgba(255,255,255,0.3);
        backface-visibility:hidden;
}
.flip.up.go .back:before {
        animation:backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
        0% {
        transform:perspective(160px) rotateX(0deg);
}
100% {
        transform:perspective(160px) rotateX(-180deg);
}
}@keyframes backFlipDown {
        0% {
        transform:perspective(160px) rotateX(180deg);
}
100% {
        transform:perspective(160px) rotateX(0deg);
}
}@keyframes frontFlipUp {
        0% {
        transform:perspective(160px) rotateX(0deg);
}
100% {
        transform:perspective(160px) rotateX(180deg);
}
}@keyframes backFlipUp {
        0% {
        transform:perspective(160px) rotateX(-180deg);
}
100% {
        transform:perspective(160px) rotateX(0deg);
}
}.flip .number0:before,.flip .number0:after {
        content:"0";
}
.flip .number1:before,.flip .number1:after {
        content:"1";
}
.flip .number2:before,.flip .number2:after {
        content:"2";
}
.flip .number3:before,.flip .number3:after {
        content:"3";
}
.flip .number4:before,.flip .number4:after {
        content:"4";
}
.flip .number5:before,.flip .number5:after {
        content:"5";
}
.flip .number6:before,.flip .number6:after {
        content:"6";
}
.flip .number7:before,.flip .number7:after {
        content:"7";
}
.flip .number8:before,.flip .number8:after {
        content:"8";
}
.flip .number9:before,.flip .number9:after {
        content:"9";
}
.clock {
        text-align:center;
        margin-bottom:200px;
}
.clock em {
        display:inline-block;
        line-height:102px;
        font-size:66px;
        font-style:normal;
        vertical-align:top;
}

</style>
</head>

<body>
    <div class="single-demo">
        <div class="flip down" id="flip">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <div class="b.........完整代码请登录后点击上方下载按钮下载查看