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

←上一编辑下一编辑→

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