尝试从 Youtube 实现 CSS 动画

Question

我试图按照这个 YouTube 教程将这个背景动画添加到我的网络作品集中，但它并没有完全按照我的意愿去做。我希望从底部出现多种尺寸的正方形，就像在这个视频中一样：https://www.youtube.com/watch?v=5RoXCs54CN8

看看它现在在我的 Heroku 应用上做了什么：https://portfolio-kw.herokuapp.com

这是我的 HTML 和 CSS。

@import url("https://fonts.googleapis.com/css?family=Muli:300|Spartan:300,400,600&display=swap");
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

// Homepage //
.topnav {
  height: 55px;
  background: transparent;
}

.menu {
  // nav menu for the background image verison of this page.
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  float: right;
  text-align: center;
}

.menu li {
  //  nav menu for the background image verison of this page.
  list-style-type: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
}

.menu li a {
  color: white;
  text-decoration: none;
  float: right;
  font-family: "Muli", serif;
  font-size: 24px;
  display: block;
  margin-right: 15px;
}

.menu li a:hover {
  background-color: white;
  color: black;
  transition: 0.3s;
}

.animation-aera {
  background: linear-gradient(to left, #3176a3, #1a2a91);
  width: 100%;
  height: 100vh;
}

.box-area ul {
  position: absolute;
  top: 50;
  left: 50;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box-area li {
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 30s linear infinite;
}

.box-aera li:nth-child(1) {
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.box-aera li:nth-child(2) {
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}

.box-aera li:nth-child(3) {
  left: 70%;
  width: 100px;
  height: 100px;
  animation-delay: 5.5s;
}

.box-aera li:nth-child(4) {
  left: 70%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s;
}

.box-aera li:nth-child(5) {
  left: 65%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}

.box-aera li:nth-child(6) {
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}

// Animation code
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) rotate(360deg);
    opacity: 0;
  }
}

.animation-area-text {
  font-family: "Muli";
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

button {
  background: transparent;
  border-radius: 28px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  border: 1px solid white;
  font-family: Arial;
  font-size: 17px;
  padding: 8px 15px;
  text-decoration: none;
  transition: 0.3s;
}

button a {
  text-decoration: none;
  color: white;
}

button a:hover {
  color: black;
}

button:hover {
  background-color: white;
  color: black;
}

button:active {
  position: relative;
  top: 1px;
}

@media screen and (max-width: 600px) {
  .menu {
    justify-content: center;
    width: 100%;
  }
  .menu li {
    padding: 15px 30px;
  }
}

// About page //
.aboutnav {
  background-color: #363636;
  height: 62px;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .menu {
    justify-content: center;
    width: 100%;
  }
}

// Projects page //
.projectsnav {
  background-color: #3b3b3b;
  height: 62px;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .menu {
    justify-content: center;
    width: 100%;
  }
}

<div class="animation-aera">

  <div class="topnav">
    <ul class="menu">
      <li>
        <%= link_to 'Portfolio', projects_path, class: 'nav-link' %>
      </li>
      <li>
        <%= link_to 'About me', about_index_path, class: 'nav-link' %>
      </li>
    </ul>
  </div>

  <ul class="box-area">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

<div class="animation-area-text">
  <h1>Kyle Williamson</h1>
  <h2>Web Developer</h2>
  <button>
      <%= link_to 'Contact Me', contacts_path, class: 'nav-link' %>
    </button>
</div>

Answer 1

将您的方框区域放在页面底部：

.box-area{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
}

将 translateY 更改为 100vh，以便动画覆盖窗口，除非您不介意在小型设备上查看它超过窗口顶部

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) rotate(360deg);
    opacity: 0;
  }
}

最后你打错了类名

.box-aera 

到

.box-area