CSS完成神奇创意的相框_图片特效特效

模板酷站
  •       3/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      Magic Photo Frame 神奇创意的CSS图片相框,这里只是介绍一种方法,至于相册的形状你完全可以自己制作,注意相框格式是PNG透明格式。

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>CSS完成神奇创意的相框</title> <style type="text/css"> *{ text-align:center; border:0; list-style:none; } body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; <!--<img src=http://p1.mb5u.com/texiao/1/20110225160525411.png>-->background:url(http://p1.mb5u.com/texiao/1/20110225160525411.png) no-repeat; } .magic2{ <!--<img src=http://p1.mb5u.com/texiao/1/20110225160525412.png>-->background:url(http://p1.mb5u.com/texiao/1/20110225160525412.png) no-repeat; } .magic3{ <!--<img src=http://p1.mb5u.com/texiao/1/20110225160525413.png>-->background:url(http://p1.mb5u.com/texiao/1/20110225160525413.png) no-repeat; } a:link,a:visited,a:hover{ text-decoration:none; } </style> </head> <body> <div class="photo"> <h1>Magic Photo Frame 神奇创意相框</h1> <ul> <li> <a href="#"><img src="http://p1.mb5u.com/texiao/20110225160525415.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> <li> <a href="#"><img src="http://p1.mb5u.com/texiao/20110225160525415.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a> </li> <li> <a href="#"><img src="http://p1.mb5u.com/texiao/20110225160525415.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a> </li> </ul> </div> </body> </html>