css 时钟翻转效果

_最初の心

于 2023-07-19 13:07:40 发布

阅读量174

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36405210/article/details/131806405

版权

1. html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>时钟翻转</title>
	<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
	<div class="contarner">
		<div data-after="" data-before=""></div>
		<div data-after="" data-before=""></div>
	</div>
</body>
</html>

2. less

*{
	padding: 0;
	margin: 0;	
}

// 定义变量
@bybac:#fff;
@conWidth:100px;
@conHeight:150px;
@conbac:#666;

body{
	background:@bybac;
}

.contarner{
	width: @conWidth;
	height:@conHeight;
	// background: @conbac;
	position: absolute;
	inset: 0;
	margin: auto;
	perspective:200px;
	border-radius: 10px;
	&::after{
		content: '';
		position: absolute;
		width: 100%;
		height:1px;
		background: white;
		inset: 0;
		margin: auto;
	}
	div{
		
		position:absolute;
		font-size: @conHeight;
		&::before,&::after{
			display: block;
			width: @conWidth;
			height: (@conHeight / 2);
			text-align: center;
			overflow: hidden;
			background: @conbac;
			border-radius: 10px;
		}
		&::before{
			content: attr(data-before);	
		}
		&::after{
			content: attr(data-after);
		}
	}

	div:nth-child(1){
		&::before{
			line-height: @conHeight;
		}
		&::after{
			line-height: 0;
		}
	}
	div:nth-child(2){
		height:(@conHeight / 2);
		transform-origin:center bottom;
		transform-style: preserve-3d;
		// transition:1s;
		backface-visibility: hidden;
		&::before{
			line-height: 0;
			transform: rotateX(180deg);	
		}
		&::after{
			line-height: @conHeight;
			transform: translateY(-100%);
		}
	}

	// &:hover {
	// 	div:nth-child(2){
	// 		// transform:rotateX(-180deg);
	// 	}
	// }
}

3. JS

		// 获取元素
		let items = document.querySelectorAll('.contarner div');
		// 当前数 （初次number+1）
		let number = -1;
		// 计时器
		let timer = '';
		// 最大数
		let maxNumber = 3;

		nextTo(number);
		timer = setInterval(function(){
			// 动画
			items[1].style.transition = "1s";
			items[1].style.transform = "rotateX(-180deg)";
		},1000);

		//  监听动画是否完成
		items[1].addEventListener('transitionend', function(){
			// 复位
			items[1].style.transition = "0s";
			items[1].style.transform = "rotateX(0)";
			// 下一个数字
			nextTo();
		});
		// 显示的数字
		function nextTo(){
			if(number < maxNumber){
				number++;
			}else{
				number = 0;
			}
			let baforeNum = number + 1;
			if(baforeNum > maxNumber){
				baforeNum = 0
			}
			for(let i of items){
				i.setAttribute('data-after', number);
				i.setAttribute('data-before', baforeNum);
			}
		}