折扇小demo

最新推荐文章于 2021-07-14 19:50:37 发布

原创最新推荐文章于 2021-07-14 19:50:37 发布 · 128 阅读

CC 4.0 BY-SA版权

今天回翻了一下好久没用的transform,用其属性值rotate做一个小玩意有兴趣的可以进来看看

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 600px;
			height: 270px;
			border-bottom:2px solid black;
			position:relative;
			margin:60px auto;
		}
		.box div{
			
			width: 60px;
			height:230px;
			transition:2s;
			position:absolute;
			transform-origin:center bottom;
			top:0;
			left:250px;
			box-shadow:2px 2px 3px #ccc;
		}
		.box div:nth-child(1){
			background-color:lightblue;
		}
		.box:hover div:nth-child(2){
			background-color:lightyellow;
			transform:rotate(15deg);
		}
		.box:hover div:nth-child(3){
			background-color:rgb(95, 140, 148);
			transform:rotate(30deg);
		}
		.box:hover div:nth-child(4){
			background-color:lightpink;
			transform:rotate(45deg);
		}
		.box:hover div:nth-child(5){
			background-color:lightyellow ;
			transform:rotate(60deg);
		}
		.box:hover div:nth-child(6){
			background-color:rgb(233, 203, 147);
			transform:rotate(75deg);
		}
		.box:hover div:nth-child(7){
			background-color:lightgreen;
			transform:rotate(90deg);
		}
		.box:hover div:nth-child(8){
			background-color:rgb(241, 241, 55);
			transform:rotate(-15deg);
		}
		.box:hover div:nth-child(9){
			background-color:blue;
			transform:rotate(-30deg);
		}
		.box:hover div:nth-child(10){
			background-color:lightpink;
			transform:rotate(-45deg);
		}
		.box:hover div:nth-child(11){
			background-color:yellow ;
			transform:rotate(-60deg);
		}
		.box:hover div:nth-child(12){
			background-color:orange;
			transform:rotate(-75deg);
		}
		.box:hover div:nth-child(13){
			background-color:lightgreen;
			transform:rotate(-90deg);
		}



	</style>

</head>
<body>
	<div class="box">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>6</div>
		<div>5</div>
		<div>4</div>
		<div>3</div>
		<div>2</div>
		<div>1</div>
	</div>
</body>
</html>