页面背景效果-滚动时缩放、下落物体

写在开头

嘿，各位倔友好吖👻，写这篇文章的时候，广东正在断崖式降温🥶，冷死个人，手都打哆嗦。🥶🥶🥶

还有，刚发现👀，掘金文章排版好像改变了❓

我记得以前是会把封面图放在文章开头的，现在咋没有了呢❓

也不知道啥时候改的😲，小编写的很多文章都会习惯做一些 gif 效果图，这下要在封面上传一次，开头放一次了。而且，之前那些带有效果图的文章，也只能是在文章列表上看到效果了，文章详情反而没有了，可惜😪。

本章，小编要分享的是两个页面背景效果，都挺简单，但也很实用，那么话不多说，我们且来瞧瞧看。

滚动缩放效果

第一个效果来自很多个人博客的首页，很多时候进入某个博客时就能看到这个效果，它也不难，但也是应该要掌握的一个小技巧。

直接贴上代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面滚动时缩放背景图</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .bg-box {
      width: 100%;
      height: 100vh; /* 高度可以根据自己的需求调整 */
      overflow: hidden;
      position: relative;
    }
    .bg-box img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%);
    }
    .content {
      font-family: 'Merienda', cursive;
      font-size: 25px;
    }
    .content p {
      text-indent: 2em;
    }
  </style>
</head>

<body>
  <div class="bg-box">
    <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25d30a0761834cfca1cfb71cda57cfbb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image" />
  </div>
  <div class="content">
    <h1 style="text-align: center;">送东阳马生序</h1>
    <p>余幼时即嗜学。家贫，无从致书以观，每假借于藏书之家，手自笔录，计日以还。天大寒，砚冰坚，手指不可屈伸，弗之怠。录毕，走送之，不敢稍逾约。以是人多以书假余，余因得遍观群书。既加冠，益慕圣贤之道。又患无硕师名人与游，尝趋百里外，从乡之先达执经叩问。先达德隆望尊，门人弟子填其室，未尝稍降辞色。余立侍左右，援疑质理，俯身倾耳以请；或遇其叱咄，色愈恭，礼愈至，不敢出一言以复；俟其欣悦，则又请焉。故余虽愚，卒获有所闻。</p>
    <p>当余之从师也，负箧曳屣行深山巨谷中。穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则缊袍敝衣处其间，略无慕艳意，以中有足乐者，不知口体之奉不若人也。盖余之勤且艰若此。今虽耄老，未有所成，犹幸预君子之列，而承天子之宠光，缀公卿之后，日侍坐备顾问，四海亦谬称其氏名，况才之过于余者乎？</p>
    <p>今诸生学于太学，县官日有廪稍之供，父母岁有裘葛之遗，无冻馁之患矣；坐大厦之下而诵诗书，无奔走之劳矣；有司业、博士为之师，未有问而不告、求而不得者也；凡所宜有之书，皆集于此，不必若余之手录，假诸人而后见也。其业有不精、德有不成者，非天质之卑，则心不若余之专耳，岂他人之过哉！</p>
    <p>东阳马生君则，在太学已二年，流辈甚称其贤。余朝京师，生以乡人子谒余，撰长书以为贽，辞甚畅达。与之论辨，言和而色夷。自谓少时用心于学甚劳，是可谓善学者矣。其将归见其亲也，余故道为学之难以告之。谓余勉乡人以学者，余之志也；诋我夸际遇之盛而骄乡人者，岂知予者哉！</p>
  </div>
  <script>
    const imgEle = document.querySelector('.bg-box img');
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      imgEle.style.width = (100 + scrollTop / 5) + "%"; // 缩放大小可以自行调整
    });
  </script>
</body>
</html>

具体效果如下：

下落物体效果

第二个效果是纯 CSS 的动画效果，难点感觉不是技术，反而是配色这方面。

直接看代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面背景下落物体效果</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: radial-gradient(circle, #24246e, #06051f);
      background-size: cover;
      background-repeat: no-repeat;
      height: 100vh;
    }
    .box span {
      display: inline-block;
      position: fixed;
      top: -120px;
      /* 初始化时都隐藏 */
      height: 50px;
      width: 50px;
      z-index: -1;
      /* 动画飘落、旋转、隐藏 */
      animation: animate 8s linear infinite;
      border-radius: 2px;
    }
    /* 单独对每个下落元素进行样式设置 */
    .box span:nth-child(1) {
      left: 60px;
      animation-delay: 0.5s;
      background-color: cyan;
    }
    .box span:nth-child(2) {
      left: 60%;
      animation-delay: 3s;
      width: 60px;
      height: 60px;
      background: #ff4293;
    }
    .box span:nth-child(3) {
      left: 20%;
      animation-delay: 2s;
      border: 5px solid #fff;
    }
    .box span:nth-child(4) {
      left: 30%;
      animation-delay: 5s;
      width: 80px;
      height: 80px;
      background: #befb46;
    }
    .box span:nth-child(5) {
      left: 40%;
      animation-delay: 1s;
      border: 5px solid #ff4293;
    }
    .box span:nth-child(6) {
      left: 50%;
      animation-delay: 7s;
      border: 5px solid deepskyblue;
    }
    .box span:nth-child(7) {
      left: 60%;
      animation-delay: 6s;
      width: 100px;
      height: 100px;
      background: #ffd59e;
    }
    .box span:nth-child(8) {
      left: 70%;
      animation-delay: 8s;
      border: 5px solid #befb46;
    }
    .box span:nth-child(9) {
      left: 80%;
      animation-delay: 6s;
      width: 90px;
      height: 90px;
      background: cyan;
    }
    .box span:nth-child(10) {
      left: 90%;
      animation-delay: 4s;
      border: 5px solid #fff;
    }
    @keyframes animate {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      80% {
        opacity: 0.7;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 十个下落元素 -->
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

具体效果：

当然，你可以把元素换成一些 Emoji 表情，会出现更有趣的效果呈现。

🍊🍉🍓🍑🍭🍬🍨🍦🍰🌽🍔🍟🍘

如果再扯上 JS 就能加上一些随机生成大小、颜色、形状，这样就变成我们最常见的一类特效背景啦。💯

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。

老样子，点赞+评论=你会了，收藏=你精通了。