首页/styles.css

.mainpage-title{ font-size:1.6em; font-weight: bold; text-shadow: rgba(150, 150, 150, 0.6) 2px 1px 2px; } .text-container {

   position: relative;
   width: 100%; /* 可以根据需要调整 */
   height: 64px; /* 可以根据需要调整 */
   margin: 0 auto; /* 居中对齐 */
   overflow: hidden;
   text-align: center; 

}

.text-slide {

   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
   animation: slide-animation 6s infinite;

}

.text-slide:nth-child(1) {

   animation-delay: 0s;

}

.text-slide:nth-child(2) {

   animation-delay: 2s;

}

.text-slide:nth-child(3) {

   animation-delay: 4s;

}

@keyframes slide-animation {

   0%, 20% {
       opacity: 0;
       transform: translateX(0);
   }
   25%, 45% {
       opacity: 1;
       transform: translateX(-1px);
   }
   30%, 40% {
       transform: translateX(1px);
   }
   50%, 100% {
       opacity: 0;
       transform: translateX(0);
   }

} /*什么*/ .textbox { margin: 0 auto;

   max-width: 1320px;
   height: auto;
   padding: 20px 0;
   background-color: rgba(255, 255, 255, 0.25);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   box-shadow: 5px 5px 2px rgba(150, 150, 150, 0.6);

} .left-child, .right-child {

   background-color: rgba(240, 240, 240, 0.25);
   flex: 1 1 100%;
   box-sizing: border-box;
   padding: 10px;

} @media (min-width: 980px) {

   .left-child,
   .right-child {
       flex: 1;
   }
   .right-child {

max-width:900px;

   }
   .left-child {
       border-right: 1px solid black;
       max-width:390px;
   }

}

.container {

   width: 100%;

} .container p{

   display: flex;
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;

} .container p * a{ max-width:270px; min-width:190px;

   flex: 1 1 calc(33.333% - 10px); /* 3 items per row with space for borders */
   height: 64px;
   font-weight: bold;
   font-size:20px;
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   margin: 5px; /* Space between items */
   text-decoration: none;
   transition: all 0.15s ease-in;
   box-shadow: 5px 5px 2px rgba(150, 150, 150, 0.6);

} .container p * a:hover{ height: 72px; box-shadow: 7px 7px 6px rgba(150, 150, 150, 0.6); } .container p * a.external{ background-image:none; } .container p .en a{ background-color: rgba(1, 33, 105, 0.8); /* 80% transparent blue */

   border: 5px solid rgba(200, 16, 46, 0.8); /* 5px 80% transparent red */

} .container p .en a.external:visited{ color: white; } .container p .zh a{ background-color: rgba(238, 28, 37, 0.8); /* 80% transparent blue */

   border: 5px solid rgba(238, 28, 37, 0.8); /* 5px 80% transparent red */

} .container p .zh a.external:visited{ color: #ffff00; } .container p .ja a{ background-color: rgba(255, 255, 255, 0.8); /* 80% transparent blue */

   border: 5px solid rgba(255, 255, 255, 0.8); /* 5px 80% transparent red */

} .container p .ja a.external:visited{ color: #bd0029; }