[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/...