今日作业之折扇效果_coreldraw详细步骤折扇效果-CSDN博客

本文链接：https://blog.csdn.net/Pursuit53/article/details/104644944

今天分享一个折扇的效果，很漂亮的呢。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 padding:0;}
			li{
				list-style: none;
			}
			.list{
				width: 500px;
				height: 300px;
				border-bottom:2px solid #333 ;
				position: relative;
				margin:50px auto ;
			}
			.list li{
				width: 60px;
				height: 200px;
				box-shadow:0 0 2px #333  ;/*阴影效果*/
				position: absolute;
				bottom: 30px;
				left: 0;
				right: 0;
				margin: auto;
				transform-origin:center bottom; 
				transition:2s;
			}
			/*右边旋转的组*/
			.list:hover li:nth-child(2){
				transform: rotate(15deg);
				background: #f00;
			}
			.list:hover li:nth-child(3){
				transform: rotate(30deg);
				background: #ff0;
			}
			.list:hover li:nth-child(4){
				transform: rotate(45deg);
				background: #fff;
			}
			.list:hover li:nth-child(5){
				transform: rotate(60deg);
				background: #0f0;
			}
			.list:hover li:nth-child(6){
				transform: rotate(75deg);
				background: #0ff;
			}
			.list:hover li:nth-child(7){
				transform: rotate(90deg);
				background: #eff;
			}
			
			/*折扇左边的组*/
			.list:hover li:nth-child(8){
				transform: rotate(-15deg);
				background: #f0f;
			}
				.list:hover li:nth-child(9){
				transform: rotate(-30deg);
				background: #ff0;
			}
				.list:hover li:nth-child(10){
				transform: rotate(-45deg);
				background: #0ff;
			}
				.list:hover li:nth-child(11){
				transform: rotate(-60deg);
				background: #fcc;
			}
				.list:hover li:nth-child(12){
				transform: rotate(-75deg);
				background: #dcf;
			}
				.list:hover li:nth-child(13){
				transform: rotate(-90deg);
				background: #c33;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
		</ul>
	</body>
</html>

下面是效果图：
在这里插入图片描述

每天都要坚持写页面哦~