Question

如何为我的网站获取一个下拉横幅，以便当用户访问我的主页时，横幅将下拉，覆盖页面的四分之一，并说出类似的内容，＆＃34;欢迎... ..＆＃34;然后几秒钟后关闭

我已经尝试了

<style>
.dropdown-notification {
   height: 40px;
   line-height: 40px;
   position: relative;
   top: -40px;
   transition: top .2s; // don't forget to use prefixes
 background-color: #4CAF50;
}
.dropdown-notification.active {
   top: 0;
}
</style>


<body>


<div class="dropdown-notification text-center">
      Hi, I'm a drop down <button class="close">Close</button>
   </div>

</body>

但我无法通过屏幕横幅或将横幅颜色更改为更丰富多彩的颜色。请提前感谢您的帮助，请理解我仍然很新，所以任何建议都是非常感谢！

Answer 1

首先，如果您想覆盖该页面，div需要position: absolute。我还添加了一个oneliner让它消失。

编辑：它现在在页面加载时滑入。

document.body.onload = function() {
  var dd = document.getElementById("dropdown")
  dd.className = dd.className.replace("disabled", "")
}

function closeDropdown() {
  document.getElementById("dropdown").className += " disabled"
}

body {
  padding: 0;
  margin: 0;
}

.dropdown-notification {
   height: 40px;
   width: 100%;
   line-height: 40px;
   position: absolute;
   top: 0;
   transition: top .3s;
   background-color: #4CAF50;
}
.dropdown-notification.disabled {
   top: -40px;
}

<div class="dropdown-notification text-center disabled" id="dropdown">
      Hi, I'm a drop down <a class="close" href="javascript:closeDropdown()">Close</a>
</div>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>
here goes the actual page text<br>

Answer 2

你可以利用几个css动画：一个用于初始下拉，另一个用于淡出。

.dropdown-notification {
  height: 25vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  line-height: 40px;
  background-color: #4CAF50;
  animation: welcome-dropdown 2s ease, welcome-fadeout 1s 3s forwards;
}

@keyframes welcome-dropdown {
  from {
    transform: translateY(calc(-100vh));
  }
  to {
    transform: translateY(0);
  }
}

@keyframes welcome-fadeout {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

<div class="dropdown-notification text-center">
  Hi, I'm a drop down <button class="close">Close</button>
</div>

下拉横幅

2 个答案: