css动画 --折扇_css的折纸扇-CSDN博客

本文链接：https://blog.csdn.net/m0_69075518/article/details/127659662
<!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>折扇</title>
    <style>
        *{
            margin: 0;padding: 0;
            list-style: none;

        }
        ul{
            height: 160px;
            position: relative;
            width: 80px;
           margin: 0 auto;
        }
        li{
            width: 40px;
            height: 120px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            text-align:center;
            background-color: burlywood;
            transition: all 1s linear;
            border-radius: 4px; 
             /*改变中心点  */
            transform-origin: bottom center;
            box-shadow: 5px 0px 6px rgba(00, 00, 14, .7);
        }
       
        li:nth-child(1),li:nth-child(13){
            background-color: cadetblue;
            opacity: 0;
        }
        li:nth-child(2),li:nth-child(12){
            background-color: floralwhite;
            opacity: 0;
        }
        li:nth-child(3),li:nth-child(11){
            background-color: gray;
            opacity: 0;
        }
        li:nth-child(4),li:nth-child(10){
            background-color: pink;
            opacity: 0;
        }
        li:nth-child(5),li:nth-child(9){
            background-color: yellowgreen;
            opacity: 0;
        }
        li:nth-child(6),li:nth-child(8){
            background-color: cornflowerblue;
            opacity: 0;
        }
        li:nth-child(7){
            background-color: chocolate;
        }
        ul:hover li:nth-child(13){
            transform:rotate(-95deg) ;
        }
        ul:hover li:nth-child(1){
            transform: rotate(90deg);
        }
        ul:hover li:nth-child(12){
            transform:rotate(-75deg) ;
        }
        ul:hover li:nth-child(2){
            transform: rotate(75deg);
        }
        ul:hover li:nth-child(11){
            transform:rotate(-60deg) ;
        }
        ul:hover li:nth-child(3){
            transform: rotate(60deg);
        }
         ul:hover li:nth-child(10){
            transform:rotate(-45deg) ;
        }
        ul:hover li:nth-child(4){
            transform: rotate(45deg);
        }
        ul:hover li:nth-child(9){
            transform:rotate(-30deg) ;
        }
        ul:hover li:nth-child(5){
            transform: rotate(30deg);
        }
        ul:hover li:nth-child(8){
            transform:rotate(-15deg) ;
        }
        ul:hover li:nth-child(6){
            transform: rotate(15deg);
        } 
 ul:hover li{
     opacity: 1;
 }
    </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>