地产小网站

honor蔚   发布于 2016年12月10日   阅读次数: 2355   

Tag: 动画 布局 设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>康桥地产</title>
    <style>
        body{
            margin: 0;
        }   

        img{
            width: 100%;
            display: block;
        }

        section{
            position: relative;
        }

        span{
            background-color: #000000;
            color: white;
            position: absolute;
            top: 50px;
            left: 0;
            padding-top:10px;
            padding-right: 30px;
            padding-bottom: 10px;
            padding-left: 30px;
            border-top-right-radius: 10px;
            border-bottom-right-radius:10px;
        }
    </style>
</head>
<body>
    <section>
        <a href="kangqiao2.html">
        <img src="Image/jxj.jpg" alt="这是第一个图片">
        <span>康桥西元前</span>
        </a>
    </section>

    <section>
        <a href="#">
        <img src ="Image/yxl.jpg" alt="这是第二个图片">
         <span>康桥锦绣缘</span>
         </a>
    </section>

    <section>
        <a href="#">
        <img src="Image/yd.jpg" alt="这是第三个图片">
        <span>康桥春晖园</span>
        </a>
    </section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>康桥服务</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            background-image: url(Image/xt.jpg);
            background-repeat:no-repeat;
            background-size: 100% 100%; 
        }

        ul{
            list-style-type:none;
            margin-top:80px;
        }

        li{
            margin-bottom:100px;
            animation-name:donghua;
            animation-duration:2s;
            animation-fill-mode:both;
        }

        a{
            color: white;
            background-color: black;
            opacity:0.7;
            text-decoration:none;
            padding-top:20px;
            padding-right: 60px;
            padding-bottom:20px;
            padding-left: 40px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-image: url(Image/right-arrow.png);
            background-repeat: no-repeat;
            background-position: 90%;
            background-size: 8px 15px; 

        }

        li:nth-child(1){
            animation-delay: 0s;
        }

        li:nth-child(2){
            animation-delay: 0.5s;
        }

        li:nth-child(3){
            animation-delay:1s;
        }

        li:nth-child(4){
            animation-delay:1.5s;
        }
        li:nth-child(5){
            animation-delay:2s;
        }

        @keyframes donghua{
            0%{
                transform:translate(-100%,0);
            }
            100%{
                transform:translate(0,0);
            }
        }

        li:nth-child(1) a{
            padding-right:100px;
        }
        li:nth-child(2) a{
            padding-right:50px;
        }
         li:nth-child(3) a{
            padding-right:30px;
        }
         li:nth-child(4) a{
            padding-right:50px;
        }
        li:nth-child(5) a{
            padding-right:100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">楼盘详情</a>
        </li>
        <li>
            <a href="#">全景模式</a>
        </li>
        <li>
            <a href="#">项目图册</a>
        </li>
        <li>
            <a href="#">预约看房</a>
        </li>
        <li>
            <a href="#">房贷计算器</a>
        </li>
    </ul>
    
</body>
</html>