未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
CSS完成神奇创意的相框
  • 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" content="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;
     background:#000;
    }
    .photo{
     width:404px;
     margin:0 auto;
     border-left:solid 2px #333;
     border-right:solid 2px #333;
     background:#fff;
    }
    .photo h1{
     font-size:14px;
     color:#666;
     line-height:40px;
    }
    .photo ul{
     margin:0;
     padding:0;
    }
    .photo li{
     position:relative;
     width:400px;
     height:300px;
     overflow:hidden;
    }
    .photo li a:link span,.photo li a:visited span{
     display:none;
    }
    .photo li a:hover span{
     display:block;
     text-align:center;
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     font-size:40px;
     line-height:300px;
     color:#f00;
     background:#000;
     filter:alpha(opacity=70);
     -moz-opacity: 0.;
     opacity: 0.7;
    }
    .magic1,.magic2,.magic3{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
    }
    .magic1{
     background: url(/jscss/demoimg/200908/01.png) no-repeat;
    }
    .magic2{
     background: url(/jscss/demoimg/200908/02.png) no-repeat;
    }
    .magic3{
     background: url(/jscss/demoimg/200908/03.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="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a>
            </li>
            <li>
                <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a>
            </li>
            <li>
                <a href="#"><img src="/jscss/demoimg/wall8.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a>
            </li>
     </ul>
    </div>
    </body>
    </html>
    本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
    打开APP阅读全文并永久保存 更多类似文章
    猜你喜欢
    类似文章
    纯CSS酷黑风格三级下拉菜单代码
    CSS3模仿的圆角Js弹出框效果,图片盒子
    jQuery 图片切换,带标题和说明文字
    动态菜单(一)
    鼠标移上图片,变换出大图片
    js个性拼图样式的下拉导航菜单代码
    更多类似文章 >>
    生活服务
    绑定账号成功
    后续可登录账号畅享VIP特权!
    如果VIP功能使用有故障,
    可点击这里联系客服!