css动画，旋转，过渡，实现折扇效果_css旋转90度动画-优快云博客

本文链接：https://blog.youkuaiyun.com/Drizzlejj/article/details/122014330

本文通过一个具体案例展示了如何使用CSS实现元素的颜色变化、旋转效果及过渡动画，并介绍了如何使用选择器来控制不同状态下的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;
        padding: 0;}
        ul{
            list-style: none;
        }
        ul{
            width: 800px;
            height: 600px;
            border: 5px solid gray;
            position: relative;
        }
        ul li {
            width: 70px;
            height: 250px;
            text-align: center;
            position: absolute;
            left: 50%;
            bottom: 30px;
            border-radius: 10px;
            transition: 2s; 
            transform-origin: bottom center; /* 设置旋转基点*/
            box-shadow: 7px 0px 3px black; /* 添加阴影*/
        }
        /*否定选择,除了第7个其他都透明*/
        ul li:not(:nth-child(7)){
            opacity: 0;
        }
        ul:hover li{opacity: 1;}
        /*添加颜色*/
        li:nth-child(1) ,li:nth-child(13){background-color: purple;}
        li:nth-child(2) ,li:nth-child(12){background-color: darkblue;}
        li:nth-child(3) ,li:nth-child(11){background-color: deeppink;}
        li:nth-child(4) ,li:nth-child(10){background-color: deepskyblue;}
        li:nth-child(5) ,li:nth-child(9){background-color: green;}
        li:nth-child(6) ,li:nth-child(8){background-color: yellow;}
        li:nth-child(7){background-color: red;}

        /* 旋转 */
        ul:hover li:nth-child(1){transform:rotate(90deg);}
        ul:hover li:nth-child(13){transform:rotate(-90deg);}
        ul:hover li:nth-child(2){transform:rotate(75deg);}
        ul:hover li:nth-child(12){transform:rotate(-75deg);}
        ul:hover li:nth-child(3){transform:rotate(60deg);}
        ul:hover li:nth-child(11){transform:rotate(-60deg);}
        ul:hover li:nth-child(4){transform:rotate(45deg);}
        ul:hover li:nth-child(10){transform:rotate(-45deg);}
        ul:hover li:nth-child(5){transform:rotate(30deg);}
        ul:hover li:nth-child(9){transform:rotate(-30deg);}
        ul:hover li:nth-child(6){transform:rotate(15deg);}
        ul:hover li:nth-child(8){transform:rotate(-15deg);}

    </style>
</head>
<body>
    <ul>
        <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>

本案例中利用了css旋转，过渡，阴影，选择器等完成。可以作为小练习