首页/styles.css

Selfice留言 | 贡献2024年10月28日 (一) 22:57的版本
.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;
	height: 36px;
	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, height 0.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: 3px;
	padding-left:6px;
	padding-right:6px;
	animation: float-left 0.35s infinite ease-in-out;
}
.base_block .video_block .neuro-button:hover{
	height: 40px;
	padding: 6px;
}
.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;
}