Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.box {
	width:600px;
	height:300px;
	border-bottom:3px solid;
	margin:100px auto;
	position:relative;
}
.box div {
	width:50px;
	height:210px;
	background-color:#9D2933;
	position:absolute;
	left:270px;
	top:50px;
	box-shadow:3px 3px 5px #333;
	border-radius:0px 0px 90px 90px;
	transform-origin:center bottom;
	transition:all 1s ease-out 0s;
	transform-origin:50% 90%;
	text-align:center;
	font-size:14px;
	line-height:30px;
	font-style:italic;
	font-weight:bolder;
	letter-spacing:12px;
	text-shadow:1px 1px 1px #09f;
	color:#fff;
}
.box div:nth-child(1) {
	background-color:orange;
}
.box:hover div:nth-child(1) {
	transform:rotate(15deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(2) {
	background-color:yellow;
}
.box:hover div:nth-child(2) {
	transform:rotate(30deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(3) {
	background-color:green;
}
.box:hover div:nth-child(3) {
	transform:rotate(45deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(4) {
	background-color:blue;
}
.box:hover div:nth-child(4) {
	transform:rotate(60deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(5) {
	background-color:aqua;
}
.box:hover div:nth-child(5) {
	transform:rotate(75deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(6) {
	background-color:#8A2BE2;
	opacity:0.8;
}
.box:hover div:nth-child(13) {
	transform:rotate(90deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(7) {
	background-color:#999;
}
.box:hover div:nth-child(7) {
	transform:rotate(-15deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(8) {
	background-color:#b0929f;
}
.box:hover div:nth-child(8) {
	transform:rotate(-30deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(9) {
	background-color:#333;
}
.box:hover div:nth-child(9) {
	transform:rotate(-45deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(10) {
	background-color:#D24D57;
}
.box:hover div:nth-child(10) {
	transform:rotate(-60deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(11) {
	background-color:#09f;
}
.box:hover div:nth-child(11) {
	transform:rotate(-75deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}
.box div:nth-child(12) {
	background-color:#EAF2D3;
}
.box:hover div:nth-child(12) {
	transform:rotate(-90deg);
	opacity:0.8;
	text-shadow:2px 2px 10px #09f;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css折扇特效

更新时间:2020-03-18 00:06:22

简单易懂

0