首页/styles.css:修订间差异
< 首页
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
.base_block { | .base_block { | ||
max-width: 1600px; | |||
padding: 1.6em; | |||
margin: 0.8em auto; | |||
background-color: rgba(255, 255, 255, 0.1); | |||
box-shadow: 0 2px 5px #aaa; | |||
} | } | ||
.base_block .video_block{ | .base_block .video_block{ | ||
第18行: | 第18行: | ||
.base_block .video_block .neuro-button{ | .base_block .video_block .neuro-button{ | ||
position: absolute; | position: absolute; | ||
width: 0; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
background-color: rgba(150, 50, 220, 0.4); | |||
color: white; | |||
padding: 0; | |||
box-sizing: border-box; | |||
transition: width 1.2s ease-in-out, padding 2.3s ease-in-out, transform 0.3s ease-in-out; | |||
font-size: 24px; | |||
text-align: center; | |||
} | } | ||
.base_block .video_block:hover .neuro-button{ | .base_block .video_block:hover .neuro-button{ | ||
width: 120px; | |||
padding: 5px; | |||
padding-left:10px; | |||
animation: float-left 0.35s infinite ease-in-out; | |||
} | } | ||
.base_block .video_block #neuro{ | .base_block .video_block #neuro{ | ||
top: 55%; | |||
right: 5%; | |||
} | |||
.base_block .video_block * a{ | |||
color: white; | |||
} | |||
.base_block .video_block * a.new{ | |||
color: white; | |||
} | } | ||
@keyframes float { | @keyframes float { | ||
第68行: | 第74行: | ||
.video_block .progress_bar{ | .video_block .progress_bar{ | ||
position: absolute; | position: absolute; | ||
bottom: 0; | |||
width: 100%; | |||
height: 64px; | |||
color: white; | |||
text-align: center; | |||
background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); | |||
} | } | ||
.video_block .progress_bar .bar{ | .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 { | .dOOPAe { | ||
position: absolute; | |||
bottom: 6px; | |||
left: 24px; | |||
color: white; | |||
font-size: 20px; | |||
text-align: center; | |||
} | } | ||
.dO1PAe { | .dO1PAe { | ||
position: absolute; | |||
top: 4px; | |||
left: 20px; | |||
color: white; | |||
text-align: center; | |||
} | } |
2024年10月28日 (一) 22:52的版本
.base_block { max-width: 1600px; padding: 1.6em; margin: 0.8em auto; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 5px #aaa; } .base_block .video_block{ position: relative; box-shadow: 0 2px 5px #aaa; max-width: 800px; transition: transform 0.3s ease-in-out; } .base_block .video_block:hover { box-shadow: 1px 5px 8px #aaa; animation: float 4s infinite ease-in-out; } .base_block .video_block .neuro-button{ position: absolute; width: 0; overflow: hidden; white-space: nowrap; background-color: rgba(150, 50, 220, 0.4); color: white; padding: 0; box-sizing: border-box; transition: width 1.2s ease-in-out, padding 2.3s ease-in-out, transform 0.3s ease-in-out; font-size: 24px; text-align: center; } .base_block .video_block:hover .neuro-button{ width: 120px; padding: 5px; padding-left:10px; animation: float-left 0.35s infinite ease-in-out; } .base_block .video_block #neuro{ top: 55%; right: 5%; } .base_block .video_block * a{ color: white; } .base_block .video_block * a.new{ color: white; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes float-left { 0%, 100% { transform: translateX(0); transform: translateY(0); } 50% { transform: translateY(-5px); transform: translateX(-2px); } 80% { transform: translateX(-3px); transform: translateY(-2.5px); } } .base_block .video_block p .mw-default-size span img { max-width: 100%; height: 100%; object-fit: contain; } .video_block .progress_bar{ position: absolute; bottom: 0; width: 100%; height: 64px; color: white; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); } .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; bottom: 6px; left: 24px; color: white; font-size: 20px; text-align: center; } .dO1PAe { position: absolute; top: 4px; left: 20px; color: white; text-align: center; }