CSS折扇效果

最新推荐文章于 2022-06-05 11:30:00 发布

梦想做程序员的剪辑师

最新推荐文章于 2022-06-05 11:30:00 发布

阅读量260

点赞数

本文链接：https://blog.csdn.net/straw_/article/details/104842386

版权

效果图：在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折扇效果</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			ul li{list-style: none;}
			#box{
				width: 800px;
				height: 500px;
				border-bottom: #000000 2px solid;
				margin: 100px auto;
				position: relative;
				
			}
			#box ul li{
				width: 80px;
				height: 400px;
				margin: 10px;
				position: absolute;		
			}
			#box ul li{
				box-shadow: 3px 3px 5px  #000;
				transform-origin: center bottom; 
				transition: 1s linear;	
			}
			#two li{
				transform-origin: center bottom; 
			}
			#box ul{
				position: absolute;left: 350px;
			}
			#box ul:hover li:nth-child(1){transform: rotate(90deg);} 
			#box ul:hover li:nth-child(2){transform: rotate(80deg);} 
			#box ul:hover li:nth-child(3){transform: rotate(70deg);} 
			#box ul:hover li:nth-child(4){transform: rotate(60deg);} 
			#box ul:hover li:nth-child(5){transform: rotate(50deg);} 
			#box ul:hover li:nth-child(6){transform: rotate(40deg);} 
			#box ul:hover li:nth-child(7){transform: rotate(30deg);} 
			#box ul:hover li:nth-child(8){transform: rotate(20deg);} 
			#box ul:hover li:nth-child(9){transform: rotate(10deg);} 
			#box ul:hover li:nth-child(10){transform: rotate(0deg);} 
			#box ul:hover li:nth-child(11){transform: rotate(-10deg);} 
			#box ul:hover li:nth-child(12){transform: rotate(-20deg);} 
			#box ul:hover li:nth-child(13){transform: rotate(-30deg);} 
			#box ul:hover li:nth-child(14){transform: rotate(-40deg);} 
			#box ul:hover li:nth-child(15){transform: rotate(-50deg);} 
			#box ul:hover li:nth-child(16){transform: rotate(-60deg);} 
			#box ul:hover li:nth-child(17){transform: rotate(-70deg);} 
			#box ul:hover li:nth-child(18){transform: rotate(-80deg);} 
			#box ul:hover li:nth-child(19){transform: rotate(-90deg);} 
			#box ul:hover li:nth-child(20){transform: rotate(-90deg);} 
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li style="background-color: #ee7dc3;"></li>
				<li style="background-color: #c788ee;"></li>
				<li style="background-color: #8593ee;"></li>
				<li style="background-color: #7ebeee;"></li>
				<li style="background-color: #8aeee3;"></li>
				<li style="background-color: #85d6ee;"></li>
				<li style="background-color: #83eeb0;"></li>
				<li style="background-color: #baee7d;"></li>
				<li style="background-color: #eed380;"></li>
				<li style="background-color: #eeae81;"></li>
				<li style="background-color: #ee7dc3;"></li>
				<li style="background-color: #c788ee;"></li>
				<li style="background-color: #8593ee;"></li>
				<li style="background-color: #7ebeee;"></li>
				<li style="background-color: #8aeee3;"></li>
				<li style="background-color: #85d6ee;"></li>
				<li style="background-color: #83eeb0;"></li>
				<li style="background-color: #baee7d;"></li>
				<li style="background-color: #eed380;"></li>
				<li style="background-color: #ccee8b;"></li>
			</ul>
		</div>
	</body>
</html>

梦想做程序员的剪辑师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS折扇效果

效果图：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>折扇效果</title> <style type="text/css"> *{margin: 0;padding: 0;} ul li{list-sty...
复制链接

扫一扫