爱程序网

HTML5+CSS实现图片过滤特效

来源: 阅读:

基于HTML5+CSS实现图片过滤特效是一款类似Instagram应用的图片过滤特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<fieldset class="demo__option-field">
             <legend>Choose a sample image:</legend>
             <img class="demo__option-img" src="img/1.jpg" alt="girl image">
             <img class="demo__option-img" src="img/atx.jpg" alt="austin image">
             <img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
             <img class="demo__option-img" src="img/bike.jpg" alt="bike image">
             <img class="demo__option-img" src="img/lakegeneva.jpg" alt="lake geneva image">
             <br>
             <label class="demo__input-label">
                 Or paste in a link to your own photo:
                 <input class="demo__input-img" type="text">
             </label>
         </fieldset>
 
         <small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>

via:http://www.w2bc.com/article/2015-11-11-html5-css3-img-color-fliter

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助