|
|
| 第13行： |
第13行： |
| justify-content: center; | | justify-content: center; |
| } | | } |
| /* 默认样式（父元素） */
| | |
| .video_block { | | .video_block { |
| display: flex; /* 初始设置为 flex */
| | position: relative; |
| position: relative;
| | max-width: 800px; |
| box-shadow: 0 2px 5px #aaa;
| | border: 2px solid #ccc; |
| max-width: 800px;
| | overflow: hidden; |
| overflow: hidden;
| | display: flex; /* 为了悬浮时能启用 Flexbox */ |
| | | flex-wrap: wrap; /* 使子元素在悬浮时换行 */ |
| /* 添加过渡动画 */
| | gap: 10px; /* 悬浮时子元素之间的间距 */ |
| transition: all 1.5s ease-in-out;
| | transition: all 1s ease; /* 添加平滑过渡 */ |
| } | | } |
|
| |
|
| /* 父元素悬浮时 */ | | .neuro-button { |
| .video_block:hover {
| | position: absolute; /* 默认使用绝对定位 */ |
| box-shadow: 1px 5px 8px #aaa;
| | width: 50px; |
| animation: float 4s infinite ease-in-out;
| | height: 50px; |
| | background-color: #4caf50; |
| | color: white; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | border-radius: 5px; |
| | transition: transform 1s ease; /* 平滑过渡 */ |
| } | | } |
| | | /* 手动为每个子元素设置 transform 属性 */ |
| /* 子元素 neuro-button */ | | .neuro-button:nth-child(1) { |
| .video_block .neuro-button {
| | transform: translate(50px, 100px) scale(1.5); |
| position: absolute;
| |
| | |
| /* 添加过渡动画 */
| |
| transition: all 1.5s ease-in-out;
| |
| } | | } |
|
| |
|
| /* 子元素的缩放动画 */
| | .neuro-button:nth-child(2) { |
| .video_block .neuro-button .screen-large,
| | transform: translate(200px, 50px) scale(2); |
| .video_block .neuro-button .screen-medium {
| |
| /* 添加过渡动画 */
| |
| transition: all 1.5s ease-in-out;
| |
| } | | } |
|
| |
|
| /* 父元素悬浮时，调整子元素位置 */
| | .neuro-button:nth-child(3) { |
| .video_block:hover .neuro-button {
| | transform: translate(300px, 200px) scale(1); |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| position: relative;
| |
| } | | } |
|
| |
|
| /* 父元素悬浮时，调整子元素的缩放动画 */
| | .neuro-button:nth-child(4) { |
| .video_block:hover .neuro-button .screen-large,
| | transform: translate(100px, 300px) scale(1.2); |
| .video_block:hover .neuro-button .screen-medium {
| |
| transform: scale(1.0);
| |
| } | | } |
| | | /* 悬浮时的样式 */ |
| /* Individual neuro-button animations */ | | .video_block:hover { |
| #neuro {
| | display: flex; /* 切换到Flexbox布局 */ |
| top: 33%;
| | align-items: center; /* 子元素居中对齐 */ |
| right: 29%;
| | justify-content: flex-start; /* 子元素按顺序排列 */ |
| animation: float-neuro 4.5s infinite ease-in-out;
| |
| | |
| /* 添加过渡动画 */
| |
| transition: all 1.5s ease-in-out;
| |
| } | | } |
|
| |
|
| #neuro .screen-large, #neuro .screen-medium {
| | .video_block:hover .neuro-button { |
| transform: scale(1.5);
| | position: relative; /* 取消绝对定位，进入Flexbox流 */ |
| }
| | transform: translate(0, 0) scale(1); /* 重置位置和大小 */ |
| | |
| #evil {
| |
| top: 15%;
| |
| left: 20%;
| |
| animation: float-evil 6s infinite ease-in-out;
| |
| | |
| /* 添加过渡动画 */
| |
| transition: all 1.5s ease-in-out;
| |
| }
| |
| | |
| #evil .screen-large, #evil .screen-medium {
| |
| transform: scale(1.3);
| |
| }
| |
| | |
| #vedal {
| |
| top: 8%;
| |
| right: 7%;
| |
| animation: float-vedal 5s infinite ease-in-out;
| |
| | |
| /* 添加过渡动画 */
| |
| transition: all 1.5s ease-in-out;
| |
| }
| |
| | |
| #vedal .screen-large, #vedal .screen-medium {
| |
| transform: scale(1.0);
| |
| }
| |
| @keyframes float {
| |
| 0%, 100% {
| |
| transform: translateY(0);
| |
| }
| |
| 50% {
| |
| transform: translateY(-10px);
| |
| }
| |
| } | | } |
| @keyframes float-neuro { | | @keyframes float-neuro { |