cvmachine.com - 申博开户网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:如何使用纯CSS实现手风琴效果?

如何使用纯CSS实现手风琴效果?

2018-01-05 19:10:21 来源:www.cvmachine.com 【

如何使用纯CSS实现手风琴效果?

昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一遍后,决定就用普通的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;

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


本文地址:http://www.cvmachine.com/dnjc/95617.html
Tags: css 实现 手风琴
编辑:申博开户网
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部