原生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:backFlip.........完整代码请登录后点击上方下载按钮下载查看