请简要表述并实操应用css实现滤镜效果

html-css026

请简要表述并实操应用css实现滤镜效果,第1张

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title></title>

<style type="text/css">

#all{border: 1px solid #BFBFBFwidth: 500pxheight: 200pxposition: relativetop: 100pxmargin: 0 auto}

li{list-style: nonewidth: 120pxheight: 120pxbackground: #000000float: leftmargin-left: 5pxtext-align: centercolor: #FFFFFFfont-size: 20px}

li:hover{opacity: 0.5}

</style>

</head>

<body>

<div id="all">

<ul>

<li>我是猪</li>

<li>我是猪</li>

<li>我是猪</li>

</ul>

</div>

</body>

</html>

所谓的滤镜就是改变透明度而已，如果是在css中来写，就是直接给你要改变的标签设置透明度属性，如果是js，那就添加动画改变透明度，可以做出很多很炫的效果。

用CSS的滤镜效果来制作的渐变色效果。【所谓渐变色，就是指定一个开始颜色，指定一个结束颜色，整个背景便从左到右由开始颜色向结束颜色逐渐变化，整个背景的颜色是动态连续的，越接近右边其颜色就越接近结束颜色，越远离开始颜色，是一种常用的网页用css的透明滤镜,alpha 然后 给图片加上 onmouseover 和 onmouseout 属性, onmouseover事件的响应函数里面把img的class更改onmouseout事件的响应函数里面把img的class改为透明滤镜就可以了.

http://zhidao.baidu.com/question/1039537.html

标签 Filter

Alpha通道属性： Filter ：ahpha（opacity=80） 80变量取值范围[1----100]

Blur模糊 4是一个变量

属性：Filter ：progid：dximagetransform.microsoft.biur(pixelradius=4,makeshadow=falsh)

Chroma透明色属性:filter:chroma(color=ff6800)ff6800是指去掉ff6800这个颜色

Flip翻转属性：fliter:flipv fliph flipv水平方向 fliph 垂直方向

Mask遮罩属性：filter：mask（color=#8888ff） #8888ff是指使用#8888ff遮罩原始图片

Wave波浪 属性：filter:wave(add=1,freq=4,lightstrength=60,phase=0, strength=6) 这是我在学习CSS的时候自己记的笔记