日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

css3的特效

 昵稱18718881 2014-07-30
<div id='wrap'>
    <ul>
        <li>
            <div class='title'>
                <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img  src='images/1.png'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img  src='images/2.png'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img  src='images/3.png'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img  src='images/4.png'>
            </a>
        </li>
        <li>
            <div class='title'>
            <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img   src='images/5.png'>
            </a>
        </li>
        <li>
            <div class='title'>
                <a href="#">TEXT</a>
            </div>
            <a href="#">
                <img src="images/6.png">
            </a>
        </li>
    </ul>
</div>
css樣式：
*{margin:0;padding:0;}
body {background:url(images/bg.jpg) repeat;}
ul{list-style:none;}
a{ text-decoration:none;}
img{border:none;}
#wrap {
    width:845px;
    height: 320px;
    overflow: hidden;
    margin: 80px auto;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.4);
}
#wrap ul {
    width: 3000px;
}
#wrap li {
    display: block;
    width: 140px; height: 320px;
    position: relative;
    float: left;
    border-left: 1px solid #aaa;
    box-shadow: 0 0 25px 10px rgba(0,0,0,0.4);
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}
#wrap li img {
    display: block;
    width:640px;
   
}
#wrap ul:hover li { width:40px;}
#wrap ul li:hover { width: 640px;}
#wrap .title {
    position: absolute;
    left: 0; bottom: 0;
    width: 640px;
    background: rgba(0,0,0,0.5);
}
#wrap .title a {
    display: block;
    color: #fff;
    font-size: 16px;
    padding: 20px;
}
 

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多