你的位置:首页 > 网页设计

[网页设计]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