CSS+DIV-CSS濾鏡的應用
9-1.html
9-2.html
9-3.html
9-4.html
9-5.html
9-6.html
9-7.html
9-8.html
9-9.html
9-10.html
9-11.html
9-12.html
9-13.html
9-14.html
9-15.html
9-16.html
9-17.html
9-18.html
9-19.html
9-20.html
9-21.html
<html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:20px;
}
img{
border:1px solid #d58000;
}
.alpha{
filter:alpha(opacity=50);
}
-->
</style>
</head>
<body>
<img src="building1.jpg" border="0">
<img src="building1.jpg" border="0" class="alpha">
</body>
</html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:20px;
}
img{
border:1px solid #d58000;
}
.alpha{
filter:alpha(opacity=50);
}
-->
</style>
</head>
<body>
<img src="building1.jpg" border="0">
<img src="building1.jpg" border="0" class="alpha">
</body>
</html>
<html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:20px;
}
img{
border:1px solid #d58000;
}
.alpha{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);
/* 從上到下漸變 */
}
-->
</style>
</head>
<body>
<img src="building2.jpg" border="0">
<img src="building2.jpg" border="0" class="alpha">
</body>
</html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:20px;
}
img{
border:1px solid #d58000;
}
.alpha{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);
/* 從上到下漸變 */
}
-->
</style>
</head>
<body>
<img src="building2.jpg" border="0">
<img src="building2.jpg" border="0" class="alpha">
</body>
</html>
<html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:10px;
}
.alpha1{
filter:alpha(opacity=100,finishopacity=0,style=2);
/* 圓形漸變，中間不透明，四周透明 */
}
.alpha2{
filter:alpha(opacity=0,finishopacity=80,style=2);
}
-->
</style>
</head>
<body>
<center>
<img src="building3.jpg"><br><br>
<img src="building3.jpg" class="alpha1">
<img src="building3.jpg" class="alpha2">
</center>
</body>
</html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:10px;
}
.alpha1{
filter:alpha(opacity=100,finishopacity=0,style=2);
/* 圓形漸變，中間不透明，四周透明 */
}
.alpha2{
filter:alpha(opacity=0,finishopacity=80,style=2);
}
-->
</style>
</head>
<body>
<center>
<img src="building3.jpg"><br><br>
<img src="building3.jpg" class="alpha1">
<img src="building3.jpg" class="alpha2">
</center>
</body>
</html>
<html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:10px;
}
.alpha1{
filter:alpha(opacity=100,finishopacity=0,style=3);
/* 矩形漸變，中間不透明，四周透明 */
}
.alpha2{
filter:alpha(opacity=0,finishopacity=100,style=3);
/* 反之 */
}
-->
</style>
</head>
<body>
<center>
<img src="strawberry.jpg">
<img src="strawberry.jpg" class="alpha1">
<img src="strawberry.jpg" class="alpha2">
</center>
</body>
</html>
<head>
<title>alpha濾鏡</title>
<style>
<!--
body{
background:url(bg1.jpg);
margin:10px;
}
.alpha1{
filter:alpha(opacity=100,finishopacity=0,style=3);
/* 矩形漸變，中間不透明，四周透明 */
}
.alpha2{
filter:alpha(opacity=0,finishopacity=100,style=3);
/* 反之 */
}
-->
</style>
</head>
<body>
<center>
<img src="strawberry.jpg">
<img src="strawberry.jpg" class="alpha1">
<img src="strawberry.jpg" class="alpha2">
</center>
</body>
</html>
<html>
<head>
<title>Blur濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.blur{
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
}
-->
</style>
</head>
<body>
<img src="building9.jpg">
<img src="building9.jpg" class="blur">
</body>
</html>
<head>
<title>Blur濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.blur{
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
}
-->
</style>
</head>
<body>
<img src="building9.jpg">
<img src="building9.jpg" class="blur">
</body>
</html>
<html>
<head>
<title>MotionBlur濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.motionblur{
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); /* 水平向右 */
}
-->
</style>
</head>
<body>
<img src="liuxiang.jpg">
<img src="liuxiang.jpg" class="motionblur">
</body>
</html>
<head>
<title>MotionBlur濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.motionblur{
filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); /* 水平向右 */
}
-->
</style>
</head>
<body>
<img src="liuxiang.jpg">
<img src="liuxiang.jpg" class="motionblur">
</body>
</html>
<html>
<head>
<title>chroma濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.chroma{
filter:chroma(color=FF6800); /* 去掉金××× */
}
-->
</style>
</head>
<body>
<img src="tiger.gif">
<img src="tiger.gif" class="chroma">
</body>
</html>
<head>
<title>chroma濾鏡</title>
<style>
<!--
body{
margin:10px;
}
.chroma{
filter:chroma(color=FF6800); /* 去掉金××× */
}
-->
</style>
</head>
<body>
<img src="tiger.gif">
<img src="tiger.gif" class="chroma">
</body>
</html>
<html>
<head>
<title>DropShadow陰影效果</title>
<style>
<!--
body{
margin:12px;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
filter:dropshadow(color=#AAAAAA,positive=true,offx=4,offy=4);
}
-->
</style>
</head>
<body>
<span>CSS濾鏡</span>
</body>
</html>
<head>
<title>DropShadow陰影效果</title>
<style>
<!--
body{
margin:12px;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
filter:dropshadow(color=#AAAAAA,positive=true,offx=4,offy=4);
}
-->
</style>
</head>
<body>
<span>CSS濾鏡</span>
</body>
</html>
<html>
<head>
<title>DropShadow陰影效果</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.drop1{
filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}
.drop2{
filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}
-->
</style>
</head>
<body>
<img src="fishing.gif">
<img src="fishing.gif" class="drop1">
<img src="fishing.gif" class="drop2">
</body>
</html>
<head>
<title>DropShadow陰影效果</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.drop1{
filter:dropshadow(color=#ffb6aa,offx=6,offy=4,positive=true);
}
.drop2{
filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);
}
-->
</style>
</head>
<body>
<img src="fishing.gif">
<img src="fishing.gif" class="drop1">
<img src="fishing.gif" class="drop2">
</body>
</html>
<html>
<head>
<title>Flip翻轉</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.flip1{
filter:fliph; /* 水平翻轉 */
}
.flip2{
filter:flipv; /* 豎直翻轉 */
}
.flip3{
filter:flipv fliph; /* 水平、豎直同時翻轉 */
}
-->
</style>
</head>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>
</html>
<head>
<title>Flip翻轉</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.flip1{
filter:fliph; /* 水平翻轉 */
}
.flip2{
filter:flipv; /* 豎直翻轉 */
}
.flip3{
filter:flipv fliph; /* 水平、豎直同時翻轉 */
}
-->
</style>
</head>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>
</html>
<html>
<head>
<title>Glow發光特效</title>
<style>
<!--
body{
margin:12px;
background-color:#000000;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
color:#ff9c00; /* 文字金××× */
filter:glow(color=#FFFF99,strength=6); /* 發×××光 */
}
-->
</style>
</head>
<body>
<span>CSS發光濾鏡</span>
</body>
</html>
<head>
<title>Glow發光特效</title>
<style>
<!--
body{
margin:12px;
background-color:#000000;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
color:#ff9c00; /* 文字金××× */
filter:glow(color=#FFFF99,strength=6); /* 發×××光 */
}
-->
</style>
</head>
<body>
<span>CSS發光濾鏡</span>
</body>
</html>
<html>
<head>
<title>Glow發光特效</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.glow{
filter:glow(color=#FFFFCC,strength=5); /* 發淡×××的光 */
}
-->
</style>
</head>
<body>
<img src="girl.gif">
<img src="girl.gif" class="glow">
</body>
</html>
<head>
<title>Glow發光特效</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.glow{
filter:glow(color=#FFFFCC,strength=5); /* 發淡×××的光 */
}
-->
</style>
</head>
<body>
<img src="girl.gif">
<img src="girl.gif" class="glow">
</body>
</html>
<html>
<head>
<title>Gray灰度</title>
<style>
<!--
body{
margin:12px;
}
.gray{
filter:gray; /* 黑白圖片 */
}
-->
</style>
</head>
<body>
<img src="building5.jpg">
<img src="building5.jpg" class="gray">
</body>
</html>
<head>
<title>Gray灰度</title>
<style>
<!--
body{
margin:12px;
}
.gray{
filter:gray; /* 黑白圖片 */
}
-->
</style>
</head>
<body>
<img src="building5.jpg">
<img src="building5.jpg" class="gray">
</body>
</html>
<html>
<head>
<title>Invert反色</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.invert{
filter:invert; /* 底片效果 */
}
-->
</style>
</head>
<body>
<img src="building6.jpg">
<img src="building6.jpg" class="invert">
</body>
</html>
<head>
<title>Invert反色</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.invert{
filter:invert; /* 底片效果 */
}
-->
</style>
</head>
<body>
<img src="building6.jpg">
<img src="building6.jpg" class="invert">
</body>
</html>
<html>
<head>
<title>Mask遮罩</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.mask{
filter:mask(color=#8888FF); /* 遮罩效果 */
}
-->
</style>
</head>
<body>
<img src="muma.gif">
<img src="muma.gif" class="mask">
</body>
</html>
<head>
<title>Mask遮罩</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.mask{
filter:mask(color=#8888FF); /* 遮罩效果 */
}
-->
</style>
</head>
<body>
<img src="muma.gif">
<img src="muma.gif" class="mask">
</body>
</html>
<html>
<head>
<title>shadow陰影</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.shadow{
filter:shadow(color=#CCCCFF,direction=135); /* 陰影效果 */
}
.drop{
filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
/* 下落陰影 */
}
-->
</style>
</head>
<body>
<img src="baby.gif">
<img src="baby.gif" class="shadow">
<img src="baby.gif" class="drop">
</body>
</html>
<head>
<title>shadow陰影</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.shadow{
filter:shadow(color=#CCCCFF,direction=135); /* 陰影效果 */
}
.drop{
filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);
/* 下落陰影 */
}
-->
</style>
</head>
<body>
<img src="baby.gif">
<img src="baby.gif" class="shadow">
<img src="baby.gif" class="drop">
</body>
</html>
<html>
<head>
<title>X-ray濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.xray{
filter:xray; /* X光效果 */
}
.gray{
filter:gray; /* 黑白效果 */
}
-->
</style>
</head>
<body>
<img src="building7.jpg">
<img src="building7.jpg" class="xray">
<img src="building7.jpg" class="gray">
</body>
</html>
<head>
<title>X-ray濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.xray{
filter:xray; /* X光效果 */
}
.gray{
filter:gray; /* 黑白效果 */
}
-->
</style>
</head>
<body>
<img src="building7.jpg">
<img src="building7.jpg" class="xray">
<img src="building7.jpg" class="gray">
</body>
</html>
<html>
<head>
<title>浮雕濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
span.emboss{
font-family:黑體;
height:100px; font-size:80px;
font-weight:bold;
color:#FFFFFF;
filter:progid:DXImageTransform.microsoft.emboss(bias=0.5);
}
span.engrave{
font-family:黑體;
height:100px; font-size:80px;
font-weight:bold;
color:#FFFFFF;
filter:progid:DXImageTransform.microsoft.engrave(bias=0.5);
}
-->
</style>
</head>
<body>
<span class="emboss">浮雕Emboss濾鏡</span>
<span class="engrave">浮雕Engrave濾鏡</span>
</body>
</html>
<head>
<title>浮雕濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
span.emboss{
font-family:黑體;
height:100px; font-size:80px;
font-weight:bold;
color:#FFFFFF;
filter:progid:DXImageTransform.microsoft.emboss(bias=0.5);
}
span.engrave{
font-family:黑體;
height:100px; font-size:80px;
font-weight:bold;
color:#FFFFFF;
filter:progid:DXImageTransform.microsoft.engrave(bias=0.5);
}
-->
</style>
</head>
<body>
<span class="emboss">浮雕Emboss濾鏡</span>
<span class="engrave">浮雕Engrave濾鏡</span>
</body>
</html>
<html>
<head>
<title>浮雕濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.emboss{
filter:progid:DXImageTransform.microsoft.emboss(bias=0.4);
}
.engrave{
filter:progid:DXImageTransform.microsoft.engrave(bias=0.4);
}
-->
</style>
</head>
<body>
<img src="building8.jpg">
<img src="building8.jpg" class="emboss">
<img src="building8.jpg" class="engrave">
</body>
</html>
<head>
<title>浮雕濾鏡</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.emboss{
filter:progid:DXImageTransform.microsoft.emboss(bias=0.4);
}
.engrave{
filter:progid:DXImageTransform.microsoft.engrave(bias=0.4);
}
-->
</style>
</head>
<body>
<img src="building8.jpg">
<img src="building8.jpg" class="emboss">
<img src="building8.jpg" class="engrave">
</body>
</html>
<html>
<head>
<title>Wave波浪濾鏡</title>
<style>
<!--
body{
margin:12px;
background-color:#e4f1ff;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
font-weight:bold;
color:#50a6ff;
}
span.wave1{
filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{
filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{
filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}
-->
</style>
</head>
<body>
<span class="wave1">波浪Wave</span>
<span class="wave2">波浪Wave</span>
<span class="wave3">波浪Wave</span>
</body>
</html>
<head>
<title>Wave波浪濾鏡</title>
<style>
<!--
body{
margin:12px;
background-color:#e4f1ff;
}
span{
font-family:Arial, Helvetica, sans-serif;
height:100px; font-size:80px;
font-weight:bold;
color:#50a6ff;
}
span.wave1{
filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
}
span.wave2{
filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
}
span.wave3{
filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
}
-->
</style>
</head>
<body>
<span class="wave1">波浪Wave</span>
<span class="wave2">波浪Wave</span>
<span class="wave3">波浪Wave</span>
</body>
</html>
<html>
<head>
<title>三個濾鏡同時使用</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.three{
filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
/* 同時使用三個濾鏡 */
/* 豎直翻轉、透明、波浪效果 */
}
-->
</style>
</head>
<body>
<img src="lotus.jpg"><br>
<img src="lotus.jpg" class="three">
</body>
</html>
<head>
<title>三個濾鏡同時使用</title>
<style>
<!--
body{
margin:12px;
background:#000000;
}
.three{
filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
/* 同時使用三個濾鏡 */
/* 豎直翻轉、透明、波浪效果 */
}
-->
</style>
</head>
<body>
<img src="lotus.jpg"><br>
<img src="lotus.jpg" class="three">
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局
》
相關文章
- 1. Unity 系統應用，PostProcessing 後期濾鏡
- 2. 巧用CSS的 Mask 濾鏡
- 3. iOS8 CIGlassDistortion濾鏡的使用
- 4. FFMPEG的filter濾鏡使用
- 5. filter濾鏡的使用
- 6. 濾鏡
- 7. css中的濾鏡
- 8. Webob——WSGI的「濾鏡」
- 9. 圖像濾鏡藝術---Swirl濾鏡
- 10. 圖像濾鏡藝術---暗調濾鏡
- 更多相關文章...
- • SVG 濾鏡 - SVG 教程
- • Docker 鏡像使用 - Docker教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Unity 系統應用，PostProcessing 後期濾鏡
- 2. 巧用CSS的 Mask 濾鏡
- 3. iOS8 CIGlassDistortion濾鏡的使用
- 4. FFMPEG的filter濾鏡使用
- 5. filter濾鏡的使用
- 6. 濾鏡
- 7. css中的濾鏡
- 8. Webob——WSGI的「濾鏡」
- 9. 圖像濾鏡藝術---Swirl濾鏡
- 10. 圖像濾鏡藝術---暗調濾鏡