前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

多彩边框

css3
一直都是一成不变的单色边框,也突然想弄弄多彩的,在一些小的页面中可以尝试一下,配合css3也可以做出些动感的交互来。

demo 地址:http://jsbin.com/uvuzoy/4/

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    ul{zoom:1;padding:0;}
    ul:after{ content:"";display:block;height:0;clear:both; visibility:hidden;}
    li{float:left;width:290px;margin-right:5px;margin-bottom:5px;list-style-type:none;overflow:hidden;}
    .casestudies-body {
        margin: 0 auto;
        padding: 40px;
        position:relative;
    }
    .casestudies-body .category {
        color: #BAB9BB;
        font: 100 14px/33px "AvantGardePro-Medium",Arial,sans-serif;
        position: relative;
        text-decoration: none;
        text-transform: none;
        top: -9px;
    }
    .casestudies-body ul {
        list-style: none outside none;
        margin-bottom: 15px;
        margin-top: 42px;
        padding: 0;
    }
    .casestudies-body ul li {
        float: left;
        margin-left: 80px;
        width: 290px;
    }
    .casestudies-body ul li:first-child {
        margin-left: 0;
    }
    .casestudies-body .thumbnail {
        background:#33B9DF;
        box-shadow: 0 0 8px 4px #E4E4E7;
        display: block;
        height: 250px;
        overflow: hidden;
        position: relative;
        transition: all 0.5s ease-in-out 0s;
        width: 290px;
    }
    .casestudies-body .thumbnail span {
        display: block;
        height: 100%;
        overflow: hidden;
        position: absolute;
        transition: all 0.5s ease-in-out 0s;
        width: 100%;
    }
    .casestudies-body .thumbnail img {
        background:#FFFFFF;
        font-size:50px;
        height: 240px;
        left: 5px;
        position: absolute;
        top: 5px;
        width: 280px;
        line-height:240px;
        text-align:center;
        font-family:"微软雅黑";
    }
    .casestudies-body .thumbnail:hover {
        box-shadow: 0 0 8px 4px white;
    }
    .casestudies-body .thumbnail:hover span {
        transform: rotate(90deg);
    }
    .casestudies-body .tl {
        background:#F36B19;
        left: -50%;
        top: -50%;
        transform-origin: 100% 100% 0;
    }
    .casestudies-body .bl {
        background:#CF2424;
        left: -50%;
        top: 50%;
        transform-origin: 100% 0 0;
    }
    .casestudies-body .tr {
        background:#B329D4;
        left: 50%;
        top: -50%;
        transform-origin:0 100% 0;
    }
</style>
           
           
</head>
           
<body>
    <ul class="casestudies-body ">
        <li><a class="thumbnail"><span class="tl"></span><span class="tr"></span><span class="bl"></span><img src="" alt="点" /></a></li>
        <li><a class="thumbnail"><span class="tl"></span><span class="tr"></span><span class="bl"></span><img src="" alt="滴" /></a></li>
        <li><a class="thumbnail"><span class="tl"></span><span class="tr"></span><span class="bl"></span><img src="" alt="生" /></a></li>
        <li><a class="thumbnail"><span class="tl"></span><span class="tr"></span><span class="bl"></span><img src="" alt="活" /></a></li>
                   
    </ul>
</body>
</html>


转载请注明:前端录»多彩边框