|
|
| 第1行： |
第1行： |
| .mainpage-title{ | | .base_block { |
| font-size:1.6em;
| | max-width: 1600px; |
| font-weight: bold;
| | padding: 1.6em; |
| text-shadow: rgba(150, 150, 150, 0.6) 2px 1px 2px;
| | margin: 0.8em auto; |
| }
| | background-color: rgba(255, 255, 255, 0.1); |
| .text-container {
| | box-shadow: 0 2px 5px #aaa; |
| 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;
| |
| } | | } |