css实现折扇效果
非常普通的折扇
效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 600px;
height: 350px;
text-align: center;
font-size: 40px;
margin: 100px auto;
position: relative;
}
section aside{
width: 60px;
height: 280px;
position: absolute;
background: red;
font-size: 30px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto 30px;
transform-origin:bottom center;
transition: all 1.5s;
}
section:hover aside:first-child{
transform: rotate(15deg);
background: green;
}
section:hover aside:nth-child(2){
transform: rotate(30deg);
}
section:hover aside:nth-child(3){
transform: rotate(45deg);
background:pink;
}
section:hover aside:nth-child(4){
transform: rotate(60deg);
}
section:hover aside:nth-child(5){
transform: rotate(75deg);
background:pink;
}
section:hover aside:nth-child(6){
transform: rotate(90deg);
}
section:hover aside:nth-child(7){
transform: rotate(-15deg);
background: green;
}
section:hover aside:nth-child(8){
transform: rotate(-30deg);
}
section:hover aside:nth-child(9){
transform: rotate(-45deg);
background:pink;
}
section:hover aside:nth-child(10){
transform: rotate(-60deg);
}
section:hover aside:nth-child(11){
transform: rotate(-75deg);
background: pink;
}
section:hover aside:nth-child(12){
transform: rotate(-90deg);
}
</style>
</head>
<body>
<section>
<aside>1</aside>
<aside>2</aside>
<aside>3</aside>
<aside>4</aside>
<aside>5</aside>
<aside>6</aside>
<aside>7</aside>
<aside>8</aside>
<aside>9</aside>
<aside>10</aside>
<aside>11</aside>
<aside>12</aside>
<aside>月薪负35k</aside>
</section>
</body>
</html>