HTML百折扇特效 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转长方形</title>
	</head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#box{
			width: 500px;
			height: 300px;
			border-bottom: 2px solid #000;
			margin: 20px auto;
			position: relative; /*相对定位*/
			
		}
		.a{
			width: 42px;
			height:170px;
			position: absolute; /*夫元素相对定位子元素绝对定位*/
			left:210px;
			top:105px;
			transform-origin: center bottom ;
			transition: all 3s linear;
			opacity: 0.3;
			box-shadow: 2px 2px 3px 2px #000000;
			/*css盒阴影*/
		}
		#box:hover .a{
			transform: rotateZ(90deg);
			opacity: 0.3;
		}
		#box:hover div:first-child {
			transform: rotateZ(-450deg);
			opacity: 0.1;
		}
		#box:hover div:nth-child(2) {
			transform: rotateZ(435deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(3) {
			transform: rotateZ(-435deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(4) {
			transform: rotateZ(420deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(5) {
			transform: rotateZ(-420deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(6) {
			transform: rotateZ(450deg);
			opacity: 0.1;
		}
		#box:hover div:nth-child(7) {
			transform: rotateZ(405deg);
			opacity: 0.1;
		}
		#box:hover div:nth-child(8) {
			transform: rotateZ(-405deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(9) {
			transform: rotateZ(390deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(10) {
			transform: rotateZ(-390deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(11) {
			transform: rotateZ(375deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(12) {
			transform: rotateZ(-375deg);
			opacity: 0.3;
		}
		#box:hover div:nth-child(13) {
			transform: rotateZ(360deg);
			opacity: 0.2;
		}
	</style>
	<body>
		<!--多个长方形的div使用定位重合在一起，当鼠标放上去的时候有一个旋转角度，沿z轴旋转，旋转基点为center buttom，其旋转角度从-90deg->90deg依次递增。递增量为15deg，且透明度有所变换。-->
	<div id="box">
		<div class="a" style="background-color:blue ;">1</div>
		<div class="a" style="background-color:yellow ;">2</div>
		<div class="a" style="background-color:yellow ;">3</div>
		<div class="a" style="background-color:red ;">4</div>
		<div class="a" style="background-color:red ;">5</div>
		<div class="a" style="background-color:blue;">6</div>
		<div class="a" style="background-color:saddlebrown ;">7</div>
		<div class="a" style="background-color:saddlebrown ;">8</div>
		<div class="a" style="background-color:salmon ;">9</div>
		<div class="a" style="background-color:salmon ;">10</div>
		<div class="a" style="background-color:silver ;">11</div>
		<div class="a" style="background-color:silver ;">12</div>
		<div class="a" style="background-color:aqua ;">13</div>
		
		
	</div>
	
	</body>
</html>
<script type="text/javascript">
	
</script>

posted @ 2021-08-04 01:07  JackieDYH  阅读(9)  评论(0)  编辑  收藏  举报  来源