CSS实现图片倒影

IE特有滤镜:<div style=" width: 154px; height: 202px; " id="layer1">
<img src="<a href="http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png" target="_blank">http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png</a>" width="119" height="120">
<img src="<a href="http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png" target="_blank">http://gdsgj.edu.topzj.com/data/edu/26/59/01/customavatars/11/89/11894.png</a>" style='filter:flipv() Alpha(startX=77, startY=0, finishX=77, finishY=202,style=1,opacity=25,finishOpacity=0)' width="119" height="120">
</div>

支援FF:
<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "<a href="http://www.w3c.org/tr/html4/strict.dtd" target="_blank">http://www.w3c.org/tr/html4/strict.dtd</a>">
<html><head><title></title>
<style>
#aa{position:relative;width:128px;height:168px}
</style>
<script language="javascript">
function aab(){
aaa=""
ja=""
for(i=129,a=40;i<168;i++,a--){
ja+="<div style='overflow:hidden;width:128px;height:1px;position:absolute;top:"+i+"px;left:0px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>' style='margin:-"+(128-(i-128))+"px 0px 0px 0px'></div>"
}
aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa"><img src="<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>" width="128" height="128"></div>
</body>
</html>

其他效果:

<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "<a href="http://www.w3c.org/tr/html4/strict.dtd" target="_blank">http://www.w3c.org/tr/html4/strict.dtd</a>">
<html><head><title></title>
<style>
#aa{position:relative;width:128px;height:168px}
</style>
<script language="javascript">
function aab(){
aaa=""
ja=""
for(i=129,a=40;i<168;i++,a--){
ja+="<div style='overflow:hidden;width:128px;height:1px;position:absolute;top:"+i+"px;left:"+(i-129)+"px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>' style='margin:-"+(128-(i-128))+"px 0px 0px 0px'></div>"
}
aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa"><img src="<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>" width="128" height="128"></div>
</body>
</html>

這種效果也不錯:
<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "<a href="http://www.w3c.org/tr/html4/strict.dtd" target="_blank">http://www.w3c.org/tr/html4/strict.dtd</a>">
<html><head><title></title>
<style>
#aa{position:relative;width:128px;height:168px}
</style>
<script language="javascript">
function aab(){
aaa=""
ja=""
for(i=129,a=40;i<168;i++,a--){
ja+="<div style='overflow:hidden;width:128px;height:1px;position:absolute;top:"+(257-i)+"px;left:"+(i-129)+"px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>' style='margin:-"+(256-i)+"px 0px 0px 0px'></div>"
}
aa.innerHTML+=ja
}
</script>
<body onload="aab()">
<div id="aa"><img src="<a href="http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg" target="_blank">http://www.wowbox.com.tw/blog/attachments/month_0802/q200822422940.jpg</a>" width="128" height="128"></div>
</body>
</html>

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇