Bộ lọc Wave - Microsoft Legacy Filter
Cảnh báo: Filter: Wave(...) là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời** và **không hoạt động** trên trình duyệt hiện đại.
Tham số cũ (chỉ IE)
| Tham số | Mô tả |
|---|---|
| Add | 1 = cộng ảnh gốc vào ảnh sóng, 0 = chỉ ảnh sóng |
| Freq | Số lượng sóng |
| LightStrength | Độ mạnh ánh sáng trên sóng (0-100) |
| Phase | Góc bắt đầu sóng (0-100 độ) |
| Strength | Cường độ biến dạng sóng |
Thay thế hiện đại: SVG Filter + CSS
CSS chuẩn không có filter wave tích hợp. Cách tiếp cận hiện đại:
1. SVG Filter (Turbulence + Displacement Map)
<svg style="display:none">
<filter id="wave-filter">
<feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
2. CSS Animation + Transform (Wave đơn giản)
@keyframes wave {
0%, 100% { transform: translateX(0) rotate(0deg); }
25% { transform: translateX(10px) rotate(5deg); }
75% { transform: translateX(-10px) rotate(-5deg); }
}
.wave-animation { animation: wave 2s ease-in-out infinite; }3. Canvas/WebGL cho hiệu ứng sóng phức tạp
Dùng Canvas 2D API hoặc WebGL shaders để tạo hiệu ứng sóng nước, flag waving thực tế.
Kết luận
Không dùng Filter: Wave - nó đã lỗi thời từ IE9. Hãy dùng SVG Filter, CSS Animation, hoặc Canvas/WebGL cho hiệu ứng sóng hiện đại, đa nền tảng.