常见的滤镜属性
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>滤镜</title><style type="text/css">img {width: 400px;height: 250px;display: block;margin: 0 auto;transition: all 3s;/*鼠标放上去恢复原效果，动画时间3秒*/}/* -webkit-这个是做低版本兼容 */img:hover {-webkit-filter: none;}.img1 {/*滤镜属性* grayscale:设置灰度，1是百分之百，0是百分之零* */-webkit-filter: grayscale(0.5);}.img2 {/*滤镜属性* brightness:设置亮度，默认值是1，正常亮度,比1大曝光* */-webkit-filter: brightness(0);}.img3 {/*滤镜属性* sepia:设置褐色属性，1为百分百褐色，0为默认正常*/-webkit-filter: sepia(1);}.img4 {/*滤镜属性* blur:设置模糊度，单位是像素* */-webkit-filter: blur(5px);}.img5 {/*滤镜属性* contrast:设置对比度，正常是1* */-webkit-filter: contrast(0);}.img6 {/*滤镜属性* saturate:设置饱和度，正常是1* */-webkit-filter: saturate(2);}.img7 {/*滤镜属性* invert:设置胶片底色效果* */-webkit-filter: invert(1);}.img8 {/*滤镜属性* hue-rotate:设置色相旋转* */-webkit-filter: hue-rotate(90deg);}.img9 {/*实现图像慢慢画出来* */-webkit-filter: blur(1px)brightness(60)grayscale(1);}</style></head><body><!-- 记得更改图片链接src。我用的图片是封面 --><img class="img0" src="./img/鬼刀..png" /><img class="img1" src="./img/鬼刀..png" /><img class="img2" src="./img/鬼刀..png" /><img class="img3" src="./img/鬼刀..png" /><img class="img4" src="./img/鬼刀..png" /><img class="img5" src="./img/鬼刀..png" /><img class="img6" src="./img/鬼刀..png" /><img class="img7" src="./img/鬼刀..png" /><img class="img8" src="./img/鬼刀..png" /><img class="img9" src="./img/鬼刀..png" /></body>
</html>
