diff --git a/3D 建模图片制作.mp4 b/3D 建模图片制作.mp4 new file mode 100644 index 0000000..baa8fe8 Binary files /dev/null and b/3D 建模图片制作.mp4 differ diff --git a/index.html b/index.html index 3b25b15..8386277 100644 --- a/index.html +++ b/index.html @@ -30,8 +30,11 @@
- - +
+ + + +
diff --git a/script.js b/script.js index 7b204e8..76b5a70 100644 --- a/script.js +++ b/script.js @@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', function() { const micButton = document.getElementById('mic-button'); const favorabilityBar = document.getElementById('favorability-bar'); + const toggleFitButton = document.getElementById('toggle-fit-button'); + // --- 视频上传功能 --- videoUploadInput.addEventListener('change', function(event) { const file = event.target.files[0]; @@ -27,6 +29,19 @@ document.addEventListener('DOMContentLoaded', function() { } }); + // --- 视频适应模式切换功能 --- + let isFitHeight = false; + toggleFitButton.addEventListener('click', function() { + isFitHeight = !isFitHeight; + if (isFitHeight) { + bgVideo.style.objectFit = 'contain'; + toggleFitButton.textContent = '适应宽度'; + } else { + bgVideo.style.objectFit = 'cover'; + toggleFitButton.textContent = '适应高度'; + } + }); + // --- 麦克风按钮交互和好感度条模拟 --- let isListening = false; let currentFavorability = 65; // 与 CSS 中的初始宽度保持一致 diff --git a/style.css b/style.css index b488c8f..4fd189d 100644 --- a/style.css +++ b/style.css @@ -15,15 +15,12 @@ html, body { /* --- 视频背景 --- */ #bg-video { position: fixed; - top: 50%; - left: 50%; - min-width: 100%; - min-height: 100%; - width: auto; - height: auto; - transform: translateX(-50%) translateY(-50%); + top: 0; + left: 0; + width: 100%; + height: 100%; z-index: -1; /* 将视频置于最底层 */ - object-fit: cover; /* 关键:让视频填满整个屏幕而不变形 */ + object-fit: cover; /* 默认填满整个屏幕(裁剪),JS会切换它 */ background-color: #1a1a1a; /* 视频加载前的背景色 */ } @@ -77,6 +74,11 @@ html, body { /* 这个区域是弹性填充的,所以不需要太多样式 */ } +.button-container { + display: flex; + gap: 10px; /* 按钮之间的间距 */ +} + .upload-button { background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5);