CSS入门案例：折扇

	<div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

		.box{
            width: 800px;height: 500px;
            margin: 30px auto;
            border-bottom: 2px red solid;
            position: relative;
        }
        .box p{
            width: 60px;height: 200px;
            top: 100px;left: 370px;
            position: absolute;
            text-align: center;
            box-shadow: 3px 3px 5px #333;
            transform-origin: center bottom;
            transition: all 1s linear;
        }
        .box p:nth-of-type(1){background: red;}
        .box p:nth-of-type(2){background: yellow;opacity: 0;}
        .box p:nth-of-type(3){background: black;opacity: 0;}
        .box p:nth-of-type(4){background: pink;opacity: 0;}
        .box p:nth-of-type(5){background: green;opacity: 0;}
        .box p:nth-of-type(6){background: blue;opacity: 0;}
        .box p:nth-of-type(7){background: blueviolet;opacity: 0;}
        .box p:nth-of-type(8){background: peru;opacity: 0;}
        .box p:nth-of-type(9){background: yellowgreen;opacity: 0;}
        .box p:nth-of-type(10){background: purple;opacity: 0;}
        .box p:nth-of-type(11){background: hotpink;opacity: 0;}
        .box p:nth-of-type(12){background: aqua;opacity: 0;}
        .box p:nth-of-type(13){background: gold;opacity: 0;}
        .box:hover p:nth-of-type(1){transform: rotate(-90deg);}
        .box:hover p:nth-of-type(2){transform: rotate(-75deg);opacity: 1;}
        .box:hover p:nth-of-type(3){transform: rotate(-60deg);opacity: 1;}
        .box:hover p:nth-of-type(4){transform: rotate(-45deg);opacity: 1;}
        .box:hover p:nth-of-type(5){transform: rotate(-30deg);opacity: 1;}
        .box:hover p:nth-of-type(6){transform: rotate(-15deg);opacity: 1;}
        .box:hover p:nth-of-type(7){transform: rotate(0deg);opacity: 1;}
        .box:hover p:nth-of-type(8){transform: rotate(15deg);opacity: 1;}
        .box:hover p:nth-of-type(9){transform: rotate(30deg);opacity: 1;}
        .box:hover p:nth-of-type(10){transform: rotate(45deg);opacity: 1;}
        .box:hover p:nth-of-type(11){transform: rotate(60deg);opacity: 1;}
        .box:hover p:nth-of-type(12){transform: rotate(75deg);opacity: 1;}
        .box:hover p:nth-of-type(13){transform: rotate(90deg);opacity: 1;}

本文地址：https://blog.csdn.net/Rengarhunt/article/details/110139878