三列板块 js效果

哎!突然发现天天更新意外的好难啊!

这回作的是三列的板块效果,由于不会描述,所以看图片吧!

至于内容,就别太在意了,毕竟是看着这个效果作的.

而效果则是鼠标悬浮,图片放大,利用transform: scale(1.2);

在通过css3的过渡,transition: transform 1s;

以及鼠标悬浮:hover

阴影box-shadow: 10px 10px 10px #ccc;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=    , user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>    
        .kuai{
            width: 100%;    
            margin: 0 auto;
            overflow: hidden;    
        }
        .kuai>h1{
            margin-top: 50px;
            text-align: center;
        }
        .kuai>p{
            text-align: center;
            margin-bottom: 50px;
        }
        .kuai p span:hover{
            color: #284f86;
        }
        .kuai ul li{
            list-style-type: none;
            width: 33.33%;
            float: left;
            /* border: 1px solid #ccc; */
            overflow: hidden;
            padding: 10px;    
            box-sizing: border-box;
        }
        .kuai ul li img{
            width: 100%;
            transition: transform 1s;
        }
        .div1{
            overflow: hidden;
            border: 1px solid #ccc;
        }
        .div1 a{
            display: block;
            color: #000;
            text-decoration: none;
        }
        .div1:hover{
            box-shadow: 10px 10px 10px #ccc;
        }
        .tu{
            width: 100%;
            overflow: hidden;
        }
        .tu img:hover{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="kuai">
        <h1>大咖云集，知识分享的开发者技术社区</h1>
        <p><span>实战干货、在线直播、专家问答、技术论坛，学习，成长，分享，共建</span>
</p>
        <ul>
            <li>
                <div class="div1"><a href="">
                    <div class="tu"><img src="images/li.jpg" alt=""></div>
                    <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a>
                </div>
                <div class="div2">
                <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                </div>
            </li>
            <li>
                <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div>
                    <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a>
                </div>
                <div class="div2">
                    <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                </div>
            </li>
            <li>
                <div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div>
                    <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a>
                </div>
                <div class="div2">
                    <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                <p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

猜你喜欢