模仿某旅行網站純css實現背景放大效果

時間 2019-12-08

原文原文鏈接

基本功能是鼠標移動到圖片上，對應寬度變寬。其中佈局和基本樣式直接copy官網，功能部分是本身瞎鼓搗實現的。javascript

直接上代碼：html

HTML部分java

<div class="fold_wrap">
  <ul class="clearfix" id="sm">
    <li class="">
      <a href="javascript:;">
      <div class="mask_b">
        <h4>園林酒店</h4>
      </div>
      <div class="pic_auto pic_auto1"></div>
      <div class="adv_intro">有誰不愛泡溫泉？浸入霧氣蒸騰的泉水之中，把身體泡成一片茶葉，舒展輕盈。有比這更美妙的感受嗎？</div>
    </a>
    </li>
    <li class="">
      <a href="javascript:;">
        <div class="mask_b">
          <h4>情侶酒店</h4>
        </div>
        <div class="pic_auto pic_auto2"></div>
        <div class="adv_intro">浪漫，是香閨圍籠裏的曖昧，是燈火迷離，淚眼婆裟的惟美，是楊柳岸、曉風殘月中的無語凝噎……</div>
      </a>
    </li>
    <li class="">
      <a href="javascript:;">
        <div class="mask_b">
          <h4>設計師酒店</h4>
        </div>
        <div class="pic_auto pic_auto3"></div>
        <div class="adv_intro">前衛的酒店設計理念，獨具魅力的風格，優美的天然風光纔能有這樣頂級的酒店。</div>
      </a>
    </li>
    <li class="">
        <a href="javascript:;">
          <div class="mask_b">
            <h4>青年旅舍</h4>
          </div>
          <div class="pic_auto pic_auto4"></div>
          <div class="adv_intro">我爲你煮一杯溫茶，斟一杯美酒。讓咱們席地而坐，聽你的夢想。用你的隻言片語裝點咱們的夢想博物館。</div>
          </a>
    </li>
    <li class="">
        <a href="javascript:;">
        <div class="mask_b">
          <h4>特點客棧</h4>
        </div>
        <div class="pic_auto pic_auto5"></div>
        <div class="adv_intro">在這裏，你能夠靜靜發呆，而不被人打擾，只用細細品味它的美好；在這裏，你能看見最美好的星星，能讓你找到最深的感動。</div>
        </a>
    </li>
    <li class="">
      <a href="javascript:;">
        <div class="mask_b">
          <h4>海島酒店</h4>
        </div>
        <div class="pic_auto pic_auto6">
        </div>
        <div class="adv_intro">不想過冬，厭倦沉重，就飛去熱帶的島嶼游泳，卸下包袱，放下壓力，讓本身的身與心，在這碧海藍天之中，享受一次超天然的洗禮。</div>
      </a>
    </li>
    <li class="">
      <a href="javascript:;">
          <div class="mask_b">
            <h4>海外溫泉</h4>
          </div>
          <div class="pic_auto pic_auto7">
          </div>
          <div class="adv_intro">
            因地形地質的區別，世界各地的溫泉也千差萬別，選擇一處適合本身的溫泉，5分鐘後，你會忘記本身，20分鐘後，你會忘記世界。
          </div>
      </a>
    </li>
  </ul>
</div>

　CSS部分web

<style>
  @keyframes flow-in {
    0% {
      width: 133px;
    }
    100% {
      width: 402px;
    }
  }
  @keyframes flow-out {
    0% {
      width: 402px;
    }
    100% {
      width: 133px;
    }
  } 
  *{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .fold_wrap {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
  }
  .fold_wrap ul {
    width: 1200px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
  }
  .fold_wrap ul li {
    float: left;
    width: 133px;
    height: 260px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: width .5s;
  }
  li:hover + li {
    animation: flow-out 0.5s ease-in;
    animation-fill-mode: forwards;
  }
  li:hover{
    animation: flow-in 0.5s ease-in;
    animation-fill-mode: forwards;
  }
  .fold_wrap ul li .mask_b {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.3);
  }
  .fold_wrap ul li .mask_b h4 {
    color: #fff;
    width: 30px;
    margin: 0 auto;
    display: block;
    font: 30px/30px Microsoft Yahei;
    position: relative;
    padding: 30px 0 0 0;
  }
  .pic_auto {
    width: 100%;
    height: 100%;
  }
  .pic_auto1 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150422_ifold1.jpg) no-repeat center 0
  }

  .pic_auto2 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold2.jpg) no-repeat center 0
  }

  .pic_auto3 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold3.jpg) no-repeat center 0;
  }

  .pic_auto4 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold4.jpg) no-repeat center 0
  }

  .pic_auto5 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold5.jpg) no-repeat center 0
  }

  .pic_auto6 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold6.jpg) no-repeat center 0
  }

  .pic_auto7 {
      background: url(http://m.elongstatic.com/static/webapp/pc_static/common/pic/20150120_ifold7.jpg) no-repeat center 0
  }
  .fold_wrap ul li .adv_intro {
    width: 92%;
    height: 40px;
    padding: 5px 4%;
    position: absolute;
    left: 0;
    bottom: -50px;
    background: #37D;
    color: #FFF;
    overflow: hidden;
  }
</style>