html - onclick 叠加效果

Question

我只需要在点击三个点时添加叠加效果。它应该在其上显示白色背景，过渡应该从底部开始。我附上了代码笔链接。

要预览您的作品...使用此代码笔链接.... https://codepen.io/subin_s/pen/NVgLgx

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<div class="projects">

  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v" id="moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
  </div>
</div>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'Roboto';
}

.projects {
  position:relative;
  margin:2rem;
  width: 335px;
  height:400px;
  background-color:#fff;
  border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.image {
  position:absolute;
  width:100%;
  height:240px;
  background-color:skyblue;
}

.words {
  position:absolute;
  top:240px;
  padding:20px 20px 30px;
  color:#333;
}

.words i {
  position:absolute;
  top:27px;
  right:40px;
  cursor:pointer;
}

.words h2 {
  color:#008073;
}

.words p {
 padding:13px 0 0;
}

JS

document.getElementById('moreinfo').addEventListener('click', projectInfo);

function projectInfo() {

}

Answer 1

您可以通过在卡片中添加一个元素(通常是 div)并将其位置设置为绝对位置来添加叠加层。您可以使用顶部、左侧、底部或右侧属性将其定位。

要创建来自底部的叠加动画，您可以创建一个简单的 css 转换，更改顶部 css 属性的值。

我已经编辑了您的代码以在其之上创建一个小示例。希望对您有所帮助。

const moreInfoElement = document.getElementById('moreinfo');
const overlay = document.getElementById('overlay');
moreInfoElement.addEventListener('click', projectInfo);
function projectInfo() {
  overlay.classList.add('active-overlay');
  
  setTimeout(() => {
    overlay.classList.remove('active-overlay');
  }, 3000);
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body {
  font-family:'Roboto';
}

.projects {
  position:relative;
  margin:2rem;
  width: 335px;
  height:400px;
  background-color:#fff;
  border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  overflow: hidden;
}

.image {
  position:absolute;
  width:100%;
  height:240px;
  background-color:skyblue;
}

.words {
  position:absolute;
  top:240px;
  padding:20px 20px 30px;
  color:#333;
}

.words i {
  position:absolute;
  top:27px;
  right:40px;
  cursor:pointer;
}

.words h2 {
  color:#008073;
}

.words p {
 padding:13px 0 0;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1;
  transition: all .6s;
}

.active-overlay{
  top: 0;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<div class="projects">
  <div id="overlay" class="overlay">
    Some text
  </div>
  <div class="image">
  </div>
  <div class="words">
    <h2>BlogSpire</h2>
    <i class="fas fa-ellipsis-v" id="moreinfo"></i>
    <div class="clearfix"></div>
    <p>Blogging web app created for the Engineering team at WeSpire.</p>
  </div>
</div>