css3 实现折扇效果

最新推荐文章于 2022-09-20 14:25:13 发布

高菊红

最新推荐文章于 2022-09-20 14:25:13 发布

阅读量1.8k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gaojuhong/article/details/79409088

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css3 实现折叠扇效果</title>
		<style type="text/css" media="screen">
			*{margin:0; padding:0;}
			.box{position:relative;width:600px;height:230px;margin:100px auto;border-bottom:2px solid #000;}
			.box div{position:absolute;top:0;left:270px;width:60px;height:200px;opacity:0;color:#fff;transform-origin: center bottom;transition: all 1s;}
			.box:hover div{opacity:1;}
			.box div:nth-of-type(1){background-color:#5628B4;opacity:1;}
			.box div:nth-of-type(2){background-color:#232855;}
			.box div:nth-of-type(3){background-color:#37474F;}
			.box div:nth-of-type(4){background-color:#EE046C;}
			.box div:nth-of-type(5){background-color:#4A2C2C;}
			.box div:nth-of-type(6){background-color:#6B0848;}
			.box div:nth-of-type(7){background-color:#AF05AA;}
			.box div:nth-of-type(8){background-color:#AF05AA;}
			.box div:nth-of-type(9){background-color:#6B0848;}
			.box div:nth-of-type(10){background-color:#4A2C2C;}
			.box div:nth-of-type(11){background-color:#EE046C;}
			.box div:nth-of-type(12){background-color:#37474F;}
			.box div:nth-of-type(13){background-color:#232855;}
			.box:hover div:nth-of-type(1){transform: rotate(0deg)}
			.box:hover div:nth-of-type(2){transform: rotate(15deg)}
			.box:hover div:nth-of-type(3){transform: rotate(30deg)}
			.box:hover div:nth-of-type(4){transform: rotate(45deg)}
			.box:hover div:nth-of-type(5){transform: rotate(60deg)}
			.box:hover div:nth-of-type(6){transform: rotate(75deg)}
			.box:hover div:nth-of-type(7){transform: rotate(90deg)}
			.box:hover div:nth-of-type(8){transform: rotate(-90deg)}
			.box:hover div:nth-of-type(9){transform: rotate(-75deg)}
			.box:hover div:nth-of-type(10){transform: rotate(-60deg)}
			.box:hover div:nth-of-type(11){transform: rotate(-45deg)}
			.box:hover div:nth-of-type(12){transform: rotate(-30deg)}
			.box:hover div:nth-of-type(13){transform: rotate(-15deg)}
		</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>7</div>
			<div>6</div>
			<div>5</div>
			<div>4</div>
			<div>3</div>
			<div>2</div>
		</div>
	</body>
</html>

高菊红

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css3 实现折扇效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3 实现折叠扇效果&lt;/title&gt; &lt;style type="text/css" media="sc
复制链接

扫一扫