* {  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            background-image: url('https://s41.ax1x.com/2026/02/13/pZqZDzD.jpg');
            background-size: cover;
            background-position: center;
            width: 100vw;  
            height: 100vh;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            /*页脚*/
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            /*标注*/
        }  
        /*标注2*/
        .main-content {
          flex: 1;
        }
  /*标注2*/
        ul {  
            list-style: none;  
            width: 243px;  
            height: 350px;  
            transform-style: preserve-3d;  
            perspective: 900px;  
            transition: 1.5s;  
        }  
  
        li {  
            position: absolute;  
            transform-origin: left;  
        }  
  
        li:nth-child(1) {  
            transform: rotateY(-25deg);  
            transition: 3.6s;  
        }  
  
        li:nth-child(2) {  
            transform: rotateY(-23deg);  
            transition: 3.3s;  
        }  
  
        li:nth-child(3) {  
            transform: rotateY(-21deg);  
            transition: 3.0s;  
        }  
  
        li:nth-child(4) {  
            transform: rotateY(-19deg);  
            transition: 2.7s;  
        }  
  
        li:nth-child(5) {  
            transform: rotateY(-17deg);  
            transition: 2.4s;  
        }  
  
        li:nth-child(6) {  
            transform: rotateY(-15deg);  
            transition: 2.1s;  
        }  
        
        li:nth-child(7) {  
            transform: rotateY(-13deg);  
            transition: 1.8s;  
        }  
        
        li:nth-child(8) {  
            transform: rotateY(-11deg);  
            transition: 1.5s;  
        }  
        
        li:nth-child(9) {  
            transform: rotateY(-9deg);  
            transition: 1.2s;  
        }  
        
        li:nth-child(10) {  
            transform: rotateY(-7deg);  
            transition: 0.9s;  
        }  
        
        li:nth-child(11) {  
            transform: rotateY(-5deg);  
            transition: 0.6s;  
        }  
        
        li:nth-child(12) {  
            transform: rotateY(-3deg);  
            transition: 0.3s;  
        }  
        
        li:nth-child(13) {  
            transform: rotateY(-1deg);  
            transition: 0.1s;  
        }  
        
        li:nth-child(13) {  
            transform: rotateY(-15deg);  
            transition: 0.3s;  
        }  
  
        ul:hover li:nth-child(1) {  
            transform: rotateY(-180deg);  
            transition: 1.4s;  
        }  
  
        ul:hover li:nth-child(2) {  
            transform: rotateY(-180deg);  
            transition: 2.0s;  
        }  
  
        ul:hover li:nth-child(3) {  
            transform: rotateY(-180deg);  
            transition: 2.6s;  
        }  
  
        ul:hover li:nth-child(4) {  
            transform: rotateY(-180deg);  
            transition: 3.2s;  
        }  
  
        ul:hover li:nth-child(5) {  
            transform: rotateY(-180deg);  
            transition: 3.8s;  
        }  
        
        ul:hover li:nth-child(6) {  
            transform: rotateY(-180deg);  
            transition: 4.2s;  
        }  
        
        ul:hover li:nth-child(7) {  
            transform: rotateY(-180deg);  
            transition: 4.4s;  
        }  
        
        ul:hover li:nth-child(8) {  
            transform: rotateY(-180deg);  
            transition: 4.6s;  
        }  
        
        ul:hover li:nth-child(9) {  
            transform: rotateY(-180deg);  
            transition: 4.8s;  
        }  
        
        ul:hover li:nth-child(10) {  
            transform: rotateY(-180deg);  
            transition: 5.0s;  
        }  
        
        ul:hover li:nth-child(11) {  
            transform: rotateY(-180deg);  
            transition: 5.2s;  
        }  
        
        ul:hover li:nth-child(12) {  
            transform: rotateY(-180deg);  
            transition: 5.4s;  
        }  
        
        ul:hover li:nth-child(13) {  
            transform: rotateY(-180deg);  
            transition: 5.6s;  
        }  
        
        ul:hover li:nth-child(14) {  
            transform: rotateY(-180deg);  
            transition: 5.8s;  
        }  
  
        ul:hover {  
            transform: translateX(150px);  
        }  
  
        img {  
            width: 243px;  
            height: 350px;  
            box-shadow: 1px 4px 5px rgba(0, 0, 0, .2);  
        }  
         
         /* 去除所有链接的高亮显示 */ 
        a 
        { color: inherit; 
        /* 继承父元素颜色 */
         text-decoration: none; 
         /* 去除下划线 */ 
         background: none; 
         /* 去除背景色 */ 
         } 
         /* 去除点击后的蓝色背景高亮 */ 
         a:active, a:focus, a:hover { outline: none; 
         /* 去除轮廓线 */ 
         background: none; 
         /* 去除背景高亮 */ 
         -webkit-tap-highlight-color: transparent; 
         /* 移动端点击高亮 */ } /* 去除访问过的紫色 */
          a:visited { color: inherit; }