首页/styles.css：修订间差异

2024年10月28日 (一) 22:48的版本

.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 2s ease-in-out, padding 1.2s 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 2.15s infinite ease-in-out;
}
.base_block .video_block #neuro{
    top: 55%;
    right: 5%;
}
@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;
}