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

Question

我真的很喜欢点击搜索框和搜索页面出现而普通页面淡出的效果。我怎样才能复制这个？这只是 CSS3 吗？

https://atmospherejs.com/

Answer 1

您只能使用 CSS 来做到这一点，这是一种方法。

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

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);
}

<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>