帝王谷资源网

用纯CSS实现手风琴效果的示例代码
网页制作 2024/12/25 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

昨天在做一个旅游页面的项目，前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一遍后，决定就用普通的HTML+CSS就可以实现这个需求。今天趁着空闲时间稍微梳理了一下。

实现原理：

用纯CSS实现手风琴效果的示例代码

主要是利用CSS的hover属性，鼠标未移上去时，所有的li共享整个容器的宽度。当鼠标移上去的时候，hover生效，让该li标签变回原来图片的宽度，其他的图共享剩下的宽度。同时加上transition属性，产生渐变的效果。

接下来通过一个小小的demo来切身感受一下：

HTML代码：

<body>
        <div class="contain">
            <ul>
                <li>
                    <a href="#">
                        <img src="img/1.jpg" />
                    </a>
                    <div class="title">
                        <a href="#">云南.大理</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.jpg" />
                    </a>
                    <div class="title">
                        <a href="#">广西.桂林</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="img/3.jpg" />
                    </a>
                    <div class="title">
                        <a href="#">福建.厦门</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="img/4.jpg" />
                    </a>
                    <div class="title">
                        <a href="#">浙江.千岛湖</a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.jpg" />
                    </a>
                    <div class="title">
                        <a href="#">长江.三峡</a>
                    </div>
                </li>
            </ul>
        </div>
</body>

CSS代码：

        .contain {
            width: 1050px;
            margin: 100px auto;
        }
        
        .contain li {
            float: left;
            list-style: none;
            width: 200px;
            height：284px;
            transition: all 2s;
            position: relative;
            overflow: hidden;
            border-left: 2px solid rgba(255, 255, 255, .8);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
        }
        
        .contain ul:hover li {
            width: 80px;
        }
        
        .contain ul li:hover {
            width: 500px;
        }
        
        .contain li .title {
            position: absolute;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, .5);
            text-indent: 2em;
            line-height: 50px;
            bottom: 0px;
            left: 0
        }
        
        .contain a {
            color: #fff;
            text-decoration: none;
        }

实现效果图如下：

用纯CSS实现手风琴效果的示例代码

鼠标未移上去时效果

用纯CSS实现手风琴效果的示例代码

鼠标移到某张图片效果

这是一个很简单的小demo，容易上手，对于初学者来说也并不难。同时也通过这个demo感受到了CSS的强大与魅力之处，希望能给大家带来一点小小的帮助。最后梳理一下，做一下这个demo中所用的知识点做一个总结：

1.hover 选择器

解释：:hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器可用于所有元素，不只是链接。

补充：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

拓展：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

2.transition属性

解释：transition是CSS3一个简写属性，用于设置四个过渡属性：

  1. transition-property：规定设置过渡效果的 CSS 属性的名称。
  2. transition-duration：规定完成过渡效果需要多少秒或毫秒。
  3. transition-timing-function：规定速度效果的速度曲线。
  4. transition-delay：定义过渡效果何时开始。

语法：transition: property duration timing-function delay;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
纯css手风琴效果,CSS手风琴
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接