Question

我非常喜欢点击搜索框和搜索页面的效果，正常页面淡出。我怎么能复制这个？这只是CSS3吗？

Answer 1

你只能用CSS做到这一点，这是一种方式。

在此示例中，我使用了2个无线电输入来跟踪是否显示搜索框。

＆＃13;

html, body {  
  margin: 0;
  height: 100%;
}
#shide, #sshow {
  display: none;
}
.container {
  width: 100%;
  height: 100%;
  background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
  background-size:cover;
  transition: transform .6s ease-out, opacity .6s ease-out;
  z-index: 1;
}
  .showsearch{
    position: absolute;
    top: 25px;
    right: 25px;
    background-color: rgba(255,255,255,0.9);
    color: #F00;
    font-size: 20px;
    border-radius: 5px;
    padding: 10px 25px;
    cursor: pointer;
  }

.searchbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255,255,255,0.9);
  transition: opacity .5s ease-in;
}
  .searchbox .close{
    position: absolute;
    top: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    cursor: pointer;
  }
    .searchbox .close:before,
    .searchbox .close:after {
      content: ' ';
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      transform: rotate(45deg);
      background: #000;
    }
    .searchbox .close:after {
      transform: rotate(-45deg);
    }
    
  .searchbox > div {
    position: relative;
    top: 46%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
    .searchbox > div > div {
      font-size: 24px;
    }

#sshow:checked ~ .searchbox {
  opacity: 1;
  z-index: 2;
}
#sshow:checked ~ .container {
  opacity: 0.4;
  transform: scale(0.9, 0.9);
}

＆＃13;

<input type="radio" name="search" id="sshow"> 
<input type="radio" name="search" id="shide"> 

<div class="searchbox">
  <label class="close" for="shide"></label>
  <div>
    <div>Search box</div>
    <input type="text" class="field">    
  </div>
</div>

<div class="container">
  <label class="showsearch" for="sshow">Search</label>
</div>

＆＃13;

Answer 2

是的，这是css以及一些jquery你可以实现这一点。您需要将您的身体内容包装在一个包装器中，以便您可以使用css进行缩放。然后使用jquery toggleClass为body提供类似search-open的类。然后你可以像其他一样使用转换：

这是一个小提琴演示Fiddle

的CSS：

.search-overlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0;
  background:rgba(255,255,255,0.9);
  z-index: -1;
  transition: all 250ms ease-in-out;
}
.body-wrapper{
  transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
  width:100%;
  height:100%;
}
.search-open .search-overlay{
  opacity:1;
  z-index: 5;
}
.search-open .body-wrapper{
  position:fixed;
  top:0;
  left:0;
  opacity:0.5;
  transform: scale3d(0.85, 0.85, 1);
}

HTML：

<div class="search-overlay">
     Search Content...
</div>
<div class="body-wrapper">
     Body Content...
 </div>

然后jquery切换类使用主体内容中的按钮或其他东西和叠加来关闭它：

$('.search-button, .search-close').on("click", function(){
    $('body').toggleClass("search-open");
});

单击搜索时如何复制模态css3动画效果？

2 个答案: