有趣js小方块组成背景动画特效

举报
北极光之夜。 发表于 2021/09/30 14:53:48 2021/09/30
【摘要】 一.先看效果: 二.详细实现(后面有完整代码):1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后面将通过js快速生成:<div class="container"> <div class="item"></div></div>2.定义全局css样式,.container的css样式: * { margin: 0; ...

一.先看效果:

在这里插入图片描述

二.详细实现(后面有完整代码):

1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后面将通过js快速生成:

<div class="container">
      <div class="item"></div>
</div>

2.定义全局css样式,.container的css样式:

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgb(32, 32, 32);
        display: flex;
        flex-wrap: wrap;
      }

vw (viewport width) vh (viewport height) 是视窗的大小,100vw = 100%视窗宽度 100vh = 100%视窗高度;
position:fixed;固定定位;
display: flex; flex布局;
flex-wrap: wrap; 换行;

3.每个小方块.item的css样式,并设置animation动画效果:

   .item {
        width: 5vw;
        height: 5vh;
        background-color: white;
        animation: move 1.5s ease-in-out forwards;
        opacity: 0;
        overflow: hidden;
      }
      @keyframes move {
        0% {
          opacity: 0;
          transform: scale(0) translateY(1000px);
          border-radius: 50%;
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
          background-image: url("img/52.jpg");
          background-attachment: fixed;
          background-size: cover;
          border-radius: 0;
        }
      }

animation: move 1.5s ease-in-out forwards; 其中的forwards表示保持动画结束的状态效果;
opacity:0;透明度为0;
transform: scale(0) translateY(1000px); scale为缩放,translateY为Y轴方向偏移;
background-attachment:fixed;当页面的其余部分滚动时,背景图像不会移动;
background-size: cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

4.js快速生成多个小方块:

 因为每个小方块大小是5×5,而.container大小为100×100,所以需要400个小方块,标签已有一个,还需399个。

   // 获取元素
       var container = document.querySelector(".container");
      var items = document.getElementsByClassName("item");
      
      for (let i = 1; i < 400; i++) {
     // 创建小方块div
        container.innerHTML += "<div class='item'></div>";
     //设置css样式设置动画延迟   
        items[i].style.cssText = `animation-delay: ${i * 0.05}s;`;
      }

 注意不能用itemsquerySelectorAll获取全部小方块,因为得到的是一个静态列表,它不会对dom结构进行动态查询,不会再次重新获取。getElementsByClassName是动态查询的过程,会随着dom结构的变化,得到的结点列表也会发生变化。

也可以通过以下方法创建小方块:

        var a = document.createElement("div");
        a.classList.add("item");
        container.appendChild(a); 

三.完整代码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgb(32, 32, 32);
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        width: 5vw;
        height: 5vh;
        background-color: white;
        animation: move 1.5s ease-in-out forwards;
        opacity: 0;
        overflow: hidden;
      }
      .container div:nth-of-type(3n) {
        animation: move 1s ease-in-out forwards;
      }
      .container div:nth-of-type(3n + 2) {
        animation: move 2s ease-in-out forwards;
      }
      @keyframes move {
        0% {
          opacity: 0;
          transform: scale(0) translateY(1000px);
          border-radius: 50%;
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
          background-image: url("img/52.jpg");
          /* background-position: center; */
          background-attachment: fixed;
          background-size: cover;
          border-radius: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
    <script>
      var container = document.querySelector(".container");
      var items = document.getElementsByClassName("item");
      for (let i = 1; i < 400; i++) {
        container.innerHTML += "<div class='item'></div>";
        items[i].style.cssText = `animation-delay: ${i * 0.05}s;`;
      }
    </script>
  </body>
</html>

四:

  更多特效源码可以访问的我的 Gitee 仓库:https://gitee.com/aurora-in-winter/blog

下次见啦~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200