首页/styles.css
< 首页
.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; }