过渡-手风琴

最新推荐文章于 2021-07-04 16:46:13 发布

「已注销」

最新推荐文章于 2021-07-04 16:46:13 发布

阅读量97

点赞数

分类专栏： web前端开发 css 文章标签： css 过渡手风琴

本文链接：https://blog.csdn.net/weixin_44713430/article/details/100051405

版权

web前端开发同时被 2 个专栏收录

122 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    ol, ul {
        list-style: none;
    }
    a {
        width: 100%;
        height: 100%;
        display: inline-block;
        text-decoration: none;
    }
    .no_mr {
        margin-right: 0 !important;
    }
    .carousel {
        margin: 20px auto;
        width: 1500px;
        height: 600px;
        overflow: hidden;
    }
    .carousel ul {
        width: 1500px;
        height: 600px;
    }
    .carousel ul li {
        float: left;
        width: 300px;
        height: 600px;
        transition: all 1s;
    }
    .carousel ul:hover li {
        width: 125px;
    } 
    .carousel ul li:hover {
        width: 1000px;
    }
    </style>
</head>

<body>
    <div class="carousel">
        <ul>
            <li class="current"><a href="#"><img src="images/carousel/wz_machao.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/carousel/wz_ganjiang.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/carousel/wz_sunbing.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/carousel/wz_tianlang.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/carousel/wz_yao.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/carousel/wz_yuji.jpg" alt=""></a></li>
        </ul>
    </div>
</body>

</html>

效果 :
在这里插入图片描述

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡-手风琴

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; ...
复制链接

扫一扫