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

代码语言：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="btn-con">
            <button id="btn1">向下翻+1</button>
            <button id="btn2">向上翻-1</button>
        </div>
    </div>
    <div class="clock" id="clock">
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <em>:</em>
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <em>:</em>
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
        <div class="flip down">
            <div class="digital front number0"></div>
            <div class="digital back number1"></div>
        </div>
    </div>

<script>
    var flip = document.getElementById('flip')
 var backNode = document.querySelector('.back')
 var frontNode = document.que.........完整代码请登录后点击上方下载按钮下载查看