Question

所以我想在单击时制作一个黑色背景和从上到下滑动的文字的叠加层（使用@ -webkit-keyframes和from，to方法，其中包含translate（）css事件）字体很棒的youtube图标，然后单击覆盖文字下方的字体很棒的复选框（使用onclick =“ myFunction（）” html参数）时，使其从中心滑到顶部，我成功地制作了单击的部分在字体真棒youtube图标上，黑色叠加层弹出，并且文本以良好的过渡向下滑动，但是单击字体真棒复选框时我无法使其向上滑动。

我尝试使用本文进行从中心到顶部的转换，将转换滑出以放入与onClick =“ myFunction”参数Set the webkit-keyframes from/to parameter with JavaScript相匹配的javascript代码。这是我的代码：

HTML：

<div class="youtubebutton">
<a class="fab fa-youtube" id="youtube" onclick="ytbclick()"></a>
</div>
<div id="overlayytb">
  <div id="text">This link is coming soon.<div>
  <a class="fas fa-check-square" onclick="okbutton()"></a>
</div>

Javascript：

<script>

function ytbclick() {
document.getElementById("overlayytb").style.display = "block";
}

function okbutton() {

  // document.getElementById("text").style.animationDirection = "reverse";
  // document.getElementById("text").style.Display = "block";
  var cssAnimation = document.createElement('style');
  cssAnimation.type = 'text/css';
  var rules = document.createTextNode('#newtext > #text {'+'animation-name: slidedown2;'+
 ' animation-direction: reverse;'+
  'animation-fill-mode: forwards;'+
  'animation-duration: .5s;'+'}'+'-@webkit-keyframes slidedown2'+'{'+'from{transform: translate(-50%,-50%);}'+'to{transform: translate(-50%,-467%);}'+'}');
  cssAnimation.appendChild(rules);
  document.getElementsByTagName("head")[0].appendChild(cssAnimation);
}
</script>

动画幻灯片的CSS：

#overlayytb {

  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);  /*Black background with opacity */
  z-index: 2; 
  cursor: pointer; 

}

#text{
  position: absolute;
  font-family: 'Montserrat', sans-serif;
  top: 50%;
  left: 50%;
  font-size: 50px;
  letter-spacing: 0px;
  color: white;
  transform: translate(-50%,-50%);
  /*-ms-transform: translate(-50%,-50%);*/
  animation-name: slidedown;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-duration: .5s;
  animation-direction: normal;
}

@-webkit-keyframes slidedown
{
    0%
    {
        transform: translate(-50%,-467%);
    }
    100%
    {
        top:50%;
        transform: translate(-50%,-50%);
    }
}

Answer 1

我想通了！我首先通过从w3schools网站上的警报教程中激发灵感来定制警报，然后使用jQuery（bootstrap）转换带有边距和不透明度参数的幻灯片，然后使用淡入淡出选项使用javascript使不透明度变为单击带有单击功能的按钮时为0。

滑动按钮上的上下滑动叠加问题Javascript，CSS

1 个答案: