[TOC] ## 支持特效的種類 | 特效 | 說明 | 特效 | 說明 | | --- | --- | --- | --- | | grayscale | 灰度 | opacity | 透明度 | | sepia | 褐色 | brightness | 亮度 | | saturate | 飽和度 | contrast | 對比度 | | hue-rotate | 色相旋轉 | blur | 模糊 | | invert | 返色 | drop-shadow | 陰影 | ## CSS filter， -webkit-filter/filter ``` <style> .none { -webkit-filter: none; } <!--模糊--> .blur { -webkit-filter: blur(3px); } <!--灰度--> .grayscale { -webkit-filter: grayscale(1); } <!--反色--> .invert { -webkit-filter: invert(1); } <!--棕黑色--> .sepia { -webkit-filter: sepia(1); } </style> ``` ## 如何將video 與filter關聯 建立一個select標簽 ``` <div> <label>Filter: </label> <select id="filter"> <option selected value="none">None</option> <option value="blur">Blur</option> <option value="grayscale">Grayscale</option> <option value="invert">Invert</option> <option value="sepia">Sepia</option> </select> </div> ``` 給id為filter的select標簽添加onchange事件： ``` filtersSelect.onchange = function () { vidoeplay.className = filtersSelect.value; } ``` 當選擇不同的filter時候，給視頻播放的`<video id="videoplay"></video>`標簽加上classname。這樣就實現了給視頻加上特效 ## OpenGL/Metal/...