|
|
| 第20行： |
第20行： |
| overflow: hidden; | | overflow: hidden; |
| } | | } |
| .video_block:hover { | | .video_block { |
| box-shadow: 1px 5px 8px #aaa; | | position: relative; |
| animation: float 4s infinite ease-in-out; | | width: 100%; |
| }
| | height: 500px; |
| .video_block .neuro-button{
| | max-width: 800px; |
| position: absolute; | |
| width: 0; | |
| height: 40px;
| |
| overflow: hidden; | | overflow: hidden; |
| white-space: nowrap; | | display: flex; /* 为了悬浮时能启用 Flexbox */ |
| background-color: rgba(150, 50, 220, 0.4); | | flex-wrap: wrap; /* 使子元素在悬浮时换行 */ |
| color: white; | | flex-direction: row; |
| padding: 0;
| | gap: 10px; /* 悬浮时子元素之间的间距 */ |
| box-sizing: border-box; | | transition: all 1s ease; /* 添加平滑过渡 */ |
| transition: width 1.2s ease-in-out, padding 2.3s ease-in-out, height 0.3s ease-in-out, transform 0.3s ease-in-out; | | padding: 5px; |
| font-size: 24px; | |
| text-align: center;
| |
| } | | } |
| .video_block:hover .neuro-button{
| | |
| width: 120px; | | .neuro-button { |
| padding: 3px; | | position: absolute; /* 默认使用绝对定位 */ |
| padding-left:6px;
| | width: 50px; |
| padding-right:6px;
| | height: 50px; |
| }
| | background-color: #4caf50; |
| .video_block .neuro-button:hover{
| |
| height: 60px; | |
| padding: 9px;
| |
| }
| |
| .video_block #neuro{
| |
| top: 55%; | |
| right: 5%;
| |
| animation: float-neuro 0.35s infinite ease-in-out;
| |
| }
| |
| .video_block #evil{
| |
| top: 53%;
| |
| left: 18%;
| |
| animation: float-evil 0.27s infinite ease-in-out;
| |
| }
| |
| .video_block #vedal{
| |
| top: 25%;
| |
| right: 25%;
| |
| animation: float-vedal 0.41s infinite ease-in-out;
| |
| }
| |
| .video_block * a{
| |
| color: white; | | color: white; |
| width:100%; | | display: flex; |
| height:100%;
| |
| text-decoration: none;
| |
| justify-content: center; | | justify-content: center; |
| align-items: center; | | align-items: center; |
| | border-radius: 5px; |
| | transition: transform 1s ease; /* 平滑过渡 */ |
| | } |
| | /* 手动为每个子元素设置 transform 属性 */ |
| | .neuro-button:nth-child(1) { |
| | transform: translate(50px, 100px) scale(1.5); |
| | } |
| | |
| | .neuro-button:nth-child(2) { |
| | transform: translate(200px, 50px) scale(2); |
| } | | } |
| .video_block * a.new{ | | |
| color: white;
| | .neuro-button:nth-child(3) { |
| width:100%;
| | transform: translate(300px, 200px) scale(1); |
| height:100%;
| |
| text-decoration: none;
| |
| justify-content: center;
| |
| align-items: center; | |
| } | | } |
| @keyframes float {
| | |
| 0%, 100% {
| | .neuro-button:nth-child(4) { |
| transform: translateY(0);
| | transform: translate(100px, 300px) scale(1.2); |
| }
| |
| 50% { | |
| transform: translateY(-10px);
| |
| }
| |
| } | | } |
| @keyframes float-neuro {
| | /* 悬浮时的样式 */ |
| 0%, 100% {transform: translate(0px, 0px);} | | .video_block:hover { |
| 50% {transform: translate(1px, -1.67px);} | | display: flex; /* 切换到Flexbox布局 */ |
| 80% {transform: translate(-1.67px, 0.83px);} | | align-items: center; /* 子元素居中对齐 */ |
| | justify-content: flex-start; /* 子元素按顺序排列 */ |
| } | | } |
| @keyframes float-evil {
| | |
| 0%, 100% {transform: translate(0px, 0px);} | | .video_block:hover .neuro-button { |
| 30% {transform: translate(-0.83px, 1px);} | | position: relative; /* 取消绝对定位，进入Flexbox流 */ |
| 70% {transform: translate(1.67px, -1.67px);}
| | transform: translate(0, 0) scale(1); /* 重置位置和大小 */ |
| } | | } |
| @keyframes float-vedal {
| | .cd_block .mw-default-size{ |
| 0%, 100% {transform: translate(0px, 0px);}
| | |
| 40% {transform: translate(-1.03px, 0.7px);}
| |
| 50% {transform: translate(1.67px, 1px);}
| |
| 90% {transform: translate(-0.83px, -1.67px);} | |
| } | | } |
| .video_block .mw-default-size span img { | | .cd_block .mw-default-size span img { |
| max-width: 100%; | | max-width: 100%; |
| height: 100%; | | height: 100%; |
| object-fit: contain; | | object-fit: contain; |
| }
| |
| .video_block .progress_bar{
| |
| position: absolute;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: 0;
| |
| color: white;
| |
| text-align: center;
| |
| background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
| |
| transition: height 0.3s ease-in-out, transform 0.3s ease-in-out;
| |
| }
| |
| .video_block:hover .progress_bar{
| |
| height: 64px;
| |
| }
| |
| .video_block .progress_bar .bar{
| |
| position: absolute;
| |
| top: 22px;
| |
| left: 2.5%;
| |
| width: 95%;
| |
| height: 4px;
| |
| color: white;
| |
| text-align: center;
| |
| background-color: rgba(255, 255, 255, 0.8);
| |
| }
| |
| .dOOPAe {
| |
| position: absolute;
| |
| top: 26px;
| |
| left: 24px;
| |
| color: white;
| |
| font-size: 20px;
| |
| text-align: center;
| |
| }
| |
| .dO1PAe {
| |
| position: absolute;
| |
| top: 4px;
| |
| left: 20px;
| |
| color: white;
| |
| text-align: center;
| |
| } | | } |
| .sidebar_block{ | | .sidebar_block{ |