/** * Thoth Visual Effects CSS * Content Builder 視覺特效系統 * * 結構: * 1. CSS Custom Properties * 2. Entrance Animation @keyframes * 3. Entrance Animation 初始狀態 + 觸發樣式 * 4. Scroll Effect 基礎樣式 * 5. Hover Effect 過渡 (純 CSS :hover) * 6. Sticky 定位 * 7. Ken Burns @keyframes * 8. Animated Headline 樣式 * 9. Progress Bar 樣式 * 10. Circular Progress 樣式 * 11. Background Slideshow 樣式 * 12. Lottie 容器樣式 * 13. Responsive 調整 */ /* ============================================== 1. CSS Custom Properties ============================================== */ :root { --ve-duration: 600ms; --ve-delay: 0ms; --ve-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ve-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================== 2. Entrance Animation @keyframes ============================================== */ @keyframes veFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes veFadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes veFadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } @keyframes veFadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes veFadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes veZoomIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } @keyframes veSlideInUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } @keyframes veSlideInDown { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } } @keyframes veSlideInLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } @keyframes veSlideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* ============================================== 3. Entrance Animation 初始狀態 + 觸發樣式 ============================================== */ /* 只有在 JS 載入後才隱藏（.ve-js 由 visual-effects.js 加在 ） 若 JS 載入失敗，元素不會被隱藏 */ .ve-js [data-ve-animate]:not(.ve-animated) { opacity: 0; } /* Content Builder 編輯器內：保持元素可見 */ .is-builder [data-ve-animate] { opacity: 1 !important; animation: none !important; } .ve-animated[data-ve-animate] { animation-duration: var(--ve-anim-duration, 600ms); animation-delay: var(--ve-anim-delay, 0ms); animation-fill-mode: both; animation-timing-function: var(--ve-easing); } .ve-animated[data-ve-animate="fadeIn"] { animation-name: veFadeIn; } .ve-animated[data-ve-animate="fadeInUp"] { animation-name: veFadeInUp; } .ve-animated[data-ve-animate="fadeInDown"] { animation-name: veFadeInDown; } .ve-animated[data-ve-animate="fadeInLeft"] { animation-name: veFadeInLeft; } .ve-animated[data-ve-animate="fadeInRight"] { animation-name: veFadeInRight; } .ve-animated[data-ve-animate="zoomIn"] { animation-name: veZoomIn; } .ve-animated[data-ve-animate="slideInUp"] { animation-name: veSlideInUp; } .ve-animated[data-ve-animate="slideInDown"] { animation-name: veSlideInDown; } .ve-animated[data-ve-animate="slideInLeft"] { animation-name: veSlideInLeft; } .ve-animated[data-ve-animate="slideInRight"] { animation-name: veSlideInRight; } /* ============================================== 4. Scroll Effect 基礎樣式 ============================================== */ [data-ve-scroll] { will-change: transform, opacity; transition: none; } /* ============================================== 5. Hover Effect 過渡 (純 CSS :hover) ============================================== */ [data-ve-hover] { transition: all var(--ve-hover-duration, 400ms) ease; } /* Zoom */ [data-ve-hover="zoom"]:hover { transform: scale(var(--ve-hover-scale, 1.05)); } /* Shadow */ [data-ve-hover="shadow"] { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } [data-ve-hover="shadow"]:hover { box-shadow: var(--ve-hover-shadow, 0 10px 30px rgba(0, 0, 0, 0.15)); } /* Grayscale to Color */ [data-ve-hover="grayscale"] { filter: grayscale(100%); transition: filter var(--ve-hover-duration, 400ms) ease; } [data-ve-hover="grayscale"]:hover { filter: grayscale(0%); } /* Brightness */ [data-ve-hover="brightness"]:hover { filter: brightness(1.15); } /* Blur Reveal */ [data-ve-hover="blur-reveal"] { filter: blur(3px); transition: filter var(--ve-hover-duration, 400ms) ease; } [data-ve-hover="blur-reveal"]:hover { filter: blur(0); } /* Hover with overflow hidden for zoom on images */ [data-ve-hover="zoom"] { overflow: hidden; } [data-ve-hover="zoom"] > img { transition: transform var(--ve-hover-duration, 400ms) ease; } [data-ve-hover="zoom"]:hover > img { transform: scale(var(--ve-hover-scale, 1.05)); } /* Depth of Field Focus - 景深聚焦效果 */ [data-ve-hover="dof"] { filter: blur(var(--ve-dof-blur, 2px)); transform: scale(var(--ve-dof-scale-out, 0.98)); opacity: var(--ve-dof-opacity-out, 0.7); transition: filter var(--ve-hover-duration, 400ms) ease, transform var(--ve-hover-duration, 400ms) ease, opacity var(--ve-hover-duration, 400ms) ease; } [data-ve-hover="dof"]:hover { filter: blur(0); transform: scale(var(--ve-dof-scale-in, 1.02)); opacity: 1; } /* DOF 群組模式：懸停任一元素時其他元素模糊 */ [data-ve-dof-group] [data-ve-hover="dof"] { filter: blur(0); transform: scale(1); opacity: 1; } [data-ve-dof-group]:hover [data-ve-hover="dof"] { filter: blur(var(--ve-dof-blur, 2px)); transform: scale(var(--ve-dof-scale-out, 0.98)); opacity: var(--ve-dof-opacity-out, 0.7); } [data-ve-dof-group]:hover [data-ve-hover="dof"]:hover { filter: blur(0); transform: scale(var(--ve-dof-scale-in, 1.02)); opacity: 1; z-index: 1; } /* ============================================== 6. Sticky 定位 ============================================== */ [data-ve-sticky="top"] { position: -webkit-sticky; position: sticky; top: var(--ve-sticky-offset, 0px); z-index: var(--ve-sticky-zindex, 100); } [data-ve-sticky="bottom"] { position: -webkit-sticky; position: sticky; bottom: var(--ve-sticky-offset, 0px); z-index: var(--ve-sticky-zindex, 100); } /* ============================================== 7. Ken Burns @keyframes ============================================== */ @keyframes veKenBurnsIn { from { transform: scale(1) translate(0, 0); } to { transform: scale(var(--kb-scale, 1.3)) translate(var(--kb-tx, 2%), var(--kb-ty, 2%)); } } @keyframes veKenBurnsOut { from { transform: scale(var(--kb-scale, 1.3)) translate(var(--kb-tx, 2%), var(--kb-ty, 2%)); } to { transform: scale(1) translate(0, 0); } } [data-ve-kenburns] { overflow: hidden; display: block; --kb-duration: 20000ms; } [data-ve-kenburns] > img { display: block; width: 100%; height: 100%; object-fit: cover; } [data-ve-kenburns]:not([data-ve-kenburns-direction="out"]).ve-kb-active > img { animation: veKenBurnsIn var(--kb-duration) linear both infinite alternate; } [data-ve-kenburns][data-ve-kenburns-direction="out"].ve-kb-active > img { animation: veKenBurnsOut var(--kb-duration) linear both infinite alternate; } /* ============================================== 8. Animated Headline 樣式 ============================================== */ .ve-animated-headline { display: inline-block; } .ve-headline-prefix, .ve-headline-suffix { display: inline; } .ve-headline-dynamic { display: inline; position: relative; } /* Typewriter cursor */ .ve-headline-cursor { display: inline-block; animation: veCursorBlink 0.7s step-end infinite; font-weight: 100; margin-left: 1px; } @keyframes veCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Rotate effect */ .ve-headline-dynamic .ve-headline-word { display: inline-block; opacity: 0; position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity 0.4s ease, transform 0.4s ease; transform: translateY(20px); } .ve-headline-dynamic .ve-headline-word.is-active { opacity: 1; position: relative; transform: translateY(0); } /* Highlight effect */ .ve-headline-highlight { position: relative; display: inline-block; } .ve-headline-highlight svg { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; pointer-events: none; } .ve-headline-highlight svg path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--ve-hl-length, 1000); stroke-dashoffset: var(--ve-hl-length, 1000); } .ve-headline-highlight.is-active svg path { animation: veHighlightDraw 0.8s ease forwards; } @keyframes veHighlightDraw { to { stroke-dashoffset: 0; } } /* ============================================== 9. Progress Bar 樣式 ============================================== */ .ve-progress-bar { margin-bottom: 20px; } .ve-progress-bar__label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; font-weight: 500; } .ve-progress-bar__track { width: 100%; background: var(--ve-pb-bg, #e9ecef); border-radius: var(--ve-pb-radius, 10px); overflow: hidden; height: var(--ve-pb-height, 20px); } .ve-progress-bar__fill { height: 100%; width: 0; background: var(--ve-pb-color, #4A90D9); border-radius: var(--ve-pb-radius, 10px); transition: width var(--ve-pb-duration, 1500ms) cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; box-sizing: border-box; position: relative; } .ve-progress-bar__percent { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; } /* Stripe effect */ .ve-progress-bar__fill.ve-pb-stripe { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 1rem 1rem; animation: veStripeMove 1s linear infinite; } @keyframes veStripeMove { from { background-position: 1rem 0; } to { background-position: 0 0; } } /* ============================================== 10. Circular Progress 樣式 ============================================== */ .ve-circular-progress { display: inline-flex; flex-direction: column; align-items: center; position: relative; } .ve-circular-progress__ring { position: relative; display: inline-block; } .ve-circular-progress__svg { transform: rotate(-90deg); display: block; } .ve-circular-progress__bg { fill: none; stroke: var(--ve-cp-bg, #e9ecef); } .ve-circular-progress__fill { fill: none; stroke: var(--ve-cp-color, #4A90D9); stroke-linecap: round; transition: stroke-dashoffset var(--ve-cp-duration, 1500ms) cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ve-circular-progress__value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 24px; color: var(--ve-cp-color, #4A90D9); } .ve-circular-progress__label { margin-top: 10px; font-size: 14px; font-weight: 500; text-align: center; } /* ============================================== 11. Background Slideshow 樣式 ============================================== */ .ve-bg-slideshow { position: relative; overflow: hidden; min-height: var(--ve-ss-height, 400px); } .ve-bg-slideshow__slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .ve-bg-slideshow__slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--ve-ss-transition-speed, 1000ms) ease; } .ve-bg-slideshow__slide.is-active { opacity: 1; } /* Ken Burns on slideshow slides */ .ve-bg-slideshow__slide.ve-ss-kenburns { animation: veKenBurnsIn 20s linear both alternate; } .ve-bg-slideshow__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--ve-ss-overlay, rgba(0, 0, 0, 0.3)); z-index: 1; } .ve-bg-slideshow__content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: inherit; padding: 40px 20px; color: #fff; text-align: center; } /* ============================================== 12. Lottie 容器樣式 ============================================== */ .ve-lottie { display: inline-block; overflow: hidden; line-height: 0; } .ve-lottie svg { display: block; } /* ============================================== 13. Responsive 調整 ============================================== */ @media (max-width: 767px) { /* 行動裝置: 減少動畫位移距離 */ @keyframes veFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes veFadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes veFadeInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes veFadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes veSlideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes veSlideInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } @keyframes veSlideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes veSlideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* Circular progress: 行動裝置縮小 */ .ve-circular-progress__value { font-size: 18px; } /* Background slideshow: 降低最小高度 */ .ve-bg-slideshow { min-height: var(--ve-ss-height-mobile, 280px); } } /* prefers-reduced-motion: 停用所有動畫 */ @media (prefers-reduced-motion: reduce) { .ve-js [data-ve-animate]:not(.ve-animated) { opacity: 1; } [data-ve-animate], [data-ve-scroll], [data-ve-kenburns] > img, .ve-bg-slideshow__slide, .ve-headline-cursor { animation: none !important; transition: none !important; } }