Question

我只需要在单击三个点时添加叠加效果。它的顶部应该显示白色背景，过渡应该从底部开始。我已经附加了Codepen链接。

要预览您的工作... 使用此Codepen链接...。 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的元素，并将其位置设置为绝对位置。您可以使用top，left，bottom或right属性来定位它。

要创建从底部开始的叠加层的动画，您可以创建一个简单的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>

onclick叠加效果

1 个答案: