化妆师入行指南

✨

💄

入门基础

从基础开始

🎓

学习化妆的基础课程是入行的第一步。之后，前往婚纱馆从助理岗位开始实践，积累两到三个月的经验后，你就可以开始独立接单了。记住，不必投入大量资金在所谓的"高级课程"上，实践经验比理论更重要。

🔍入门技巧 💰省钱攻略

🔄

✨

技能提升

勤加练习

✋

化妆是纯粹的手艺活，熟能生巧是唯一的法则。每天坚持练习，不断重复基本技巧，直到动作变得自然流畅。只有通过持续不断的练习，你才能真正掌握这门技艺。

⏱️坚持练习 💪技能提升

💫

📱

成长之路

学习与模仿

📱

利用小红书等平台学习当下流行的化妆技巧和风格。不断模仿优秀作品，分析他人的技巧，然后融入自己的实践中。通过持续的学习和模仿，你将逐渐形成自己独特的风格。

🔍流行趋势 🌟个人风格

左右滑动查看更多 →

# 继续完成Microsoft Fluent Design风格的H5知识卡片页面以下是代码的剩余部分： ```html:fluent_template.html // 顺序下载所有卡片 downloadAllCards(0, () => { // 下载完成后恢复到原始卡片 currentCard = originalCardIndex; updateCards(); }); // 添加涟漪效果 createRippleEffect(downloadWithBgBtn, event); }); // 递归函数，用于顺序下载所有卡片 function downloadAllCards(index, callback) { if (index > 2) { // 所有卡片下载完成 showNotification('全部卡片下载完成'); if (callback) callback(); return; } // 切换到指定卡片 currentCard = index; updateCards(); // 等待卡片切换动画完成 setTimeout(() => { // 临时隐藏裁切线和标签 const cropElements = document.querySelectorAll('.crop-line, .crop-label'); cropElements.forEach(el => { el.style.display = 'none'; }); // 临时隐藏按钮组和通知 const buttonGroup = document.querySelector('.button-group'); const notification = document.querySelector('.notification'); const originalButtonDisplay = buttonGroup.style.display; const originalNotificationDisplay = notification.style.display; buttonGroup.style.display = 'none'; notification.style.display = 'none'; // 获取容器和当前卡片 const container = document.querySelector('.container'); const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; // 计算裁切区域 - 按照vw*4/3的比例从中间裁切 const cropWidth = containerWidth; const cropHeight = containerWidth * 4/3; const cropTop = (containerHeight - cropHeight) / 2; // 显示加载通知 showNotification(`正在生成卡片 ${index + 1}/3...`); // 使用html2canvas库将容器转换为图片 html2canvas(container, { scale: 2, // 提高分辨率 backgroundColor: '#f3f3f3', // 使用Fluent Design背景色 logging: false, useCORS: true, // 允许加载跨域图片 allowTaint: true, width: cropWidth, height: cropHeight, x: 0, y: cropTop, scrollX: 0, scrollY: 0 }).then(canvas => { // 恢复原始样式 cropElements.forEach(el => { el.style.display = cropLinesVisible ? 'block' : 'none'; }); buttonGroup.style.display = originalButtonDisplay; notification.style.display = originalNotificationDisplay; try { // 将canvas转换为PNG图片URL const imgData = canvas.toDataURL('image/png'); // 创建下载链接 const a = document.createElement('a'); a.href = imgData; a.download = `化妆师入行指南_卡片${index + 1}.png`; // 触发下载 a.click(); // 显示进度通知 showNotification(`已下载卡片 ${index + 1}/3`); // 延迟一下再下载下一张，避免浏览器下载限制 setTimeout(() => { // 递归下载下一张卡片 downloadAllCards(index + 1, callback); }, 1000); } catch (e) { console.error(`转换卡片${index + 1}失败:`, e); showNotification(`转换卡片${index + 1}失败，继续下载其他卡片`); // 尽管失败，仍然继续下载下一张 setTimeout(() => { downloadAllCards(index + 1, callback); }, 1000); } }).catch(error => { // 恢复原始样式 cropElements.forEach(el => { el.style.display = cropLinesVisible ? 'block' : 'none'; }); buttonGroup.style.display = originalButtonDisplay; notification.style.display = originalNotificationDisplay; console.error(`下载卡片${index + 1}失败:`, error); showNotification(`下载卡片${index + 1}失败，继续下载其他卡片`); // 尽管失败，仍然继续下载下一张 setTimeout(() => { downloadAllCards(index + 1, callback); }, 1000); }); }, 600); // 等待卡片切换动画完成 } // 显示通知函数 function showNotification(message) { const notification = document.getElementById('notification'); notification.textContent = message; notification.classList.add('show'); // 3秒后隐藏通知 setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Fluent Design 风格的涟漪效果函数 function createRippleEffect(button, event) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); button.appendChild(ripple); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); // 计算点击位置相对于按钮的坐标 const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; // 设置涟漪元素的位置和大小 ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // 动画结束后移除涟漪元素 setTimeout(() => { ripple.remove(); }, 600); } // 为所有按钮添加涟漪效果 document.querySelectorAll('.action-button').forEach(button => { button.addEventListener('click', function(event) { createRippleEffect(this, event); }); }); // 检查URL参数，如果有card参数，跳转到对应卡片 const urlParams = new URLSearchParams(window.location.search); const cardParam = urlParams.get('card'); if (cardParam !== null && !isNaN(cardParam)) { const cardIndex = parseInt(cardParam); if (cardIndex >= 0 && cardIndex <= 2) { currentCard = cardIndex; updateCards(); } } // 初始化 updateCards(); // 添加滑动提示自动隐藏 setTimeout(() => { const swipeHint = document.querySelector('.swipe-hint'); if (swipeHint) { swipeHint.style.opacity = '0'; swipeHint.style.transition = 'opacity 0.5s ease'; } }, 3000);