文章目录
前言
使用css3实现折扇效果。
实现过程
1.步骤
折扇效果实现步骤:
1、先制作一个底座，还有几个扇叶（绝对定位实现组合）
2、旋转几个扇叶
3、设置打开动画和透明度效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现折扇效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 230px;
border-bottom: 2px #000000 solid;
margin: 50px auto;
position: relative;
}
.box div{
width: 60px;
height: 200px;
position: absolute; /* 扇叶叠加到一块 */
left: 270px;
box-shadow: 3px 3px 5px #333; /* 扇子合拢时的阴影效果 */
transform-origin: center bottom; /* 扇叶的旋转以底边中心点为原点 */
transition: all 2s linear; /* 扇子打开的过度动画,平滑一些 */
}
/* 鼠标点击之前的样式,在点击后扇子打开,扇叶透明度由0到1,打开时出现阴影折叠效果 */
.box div:nth-of-type(1){background-color: red;}
.box div:nth-of-type(2){background-color: yellow;opacity: 0;}
.box div:nth-of-type(3){background-color: green;opacity: 0;}
.box div:nth-of-type(4){background-color: blue;opacity: 0;}
.box div:nth-of-type(5){background-color: pink;opacity: 0;}
.box div:nth-of-type(6){background-color: gray;opacity: 0;}
.box div:nth-of-type(7){background-color: yellowgreen;opacity: 0;}
.box div:nth-of-type(8){background-color: yellowgreen;opacity: 0;}
.box div:nth-of-type(9){background-color: gray;opacity: 0;}
.box div:nth-of-type(10){background-color: pink;opacity: 0;}
.box div:nth-of-type(11){background-color: blue;opacity: 0;}
.box div:nth-of-type(12){background-color: green;opacity: 0;}
.box div:nth-of-type(13){background-color: yellow;opacity: 0;}
/* 鼠标点击的时候触发的样式 ,每个扇叶旋转15度*/
.box:hover div:nth-of-type(2){transform: rotate(15deg); opacity: 1;}
.box:hover div:nth-of-type(3){transform: rotate(30deg); opacity: 1;}
.box:hover div:nth-of-type(3){transform: rotate(30deg); opacity: 1;}
.box:hover div:nth-of-type(4){transform: rotate(45deg); opacity: 1;}
.box:hover div:nth-of-type(5){transform: rotate(60deg); opacity: 1;}
.box:hover div:nth-of-type(6){transform: rotate(75deg); opacity: 1;}
.box:hover div:nth-of-type(7){transform: rotate(90deg); opacity: 1;}
.box:hover div:nth-of-type(8){transform: rotate(-90deg);opacity: 1;}
.box:hover div:nth-of-type(9){transform: rotate(-75deg);opacity: 1;}
.box:hover div:nth-of-type(10){transform: rotate(-60deg);opacity: 1;}
.box:hover div:nth-of-type(11){transform: rotate(-45deg);opacity: 1;}
.box:hover div:nth-of-type(12){transform: rotate(-30deg);opacity: 1;}
.box:hover div:nth-of-type(13){transform: rotate(-15deg);opacity: 1;}
</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>