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

站长

2024年04月14日 18:27 · 阅读数 2

写在开头

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

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

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

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

滚动缩放效果

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

直接贴上代码：

具体效果如下：

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

下落物体效果

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

直接看代码：

<!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 就能加上一些随机生成大小、颜色、形状，这样就变成我们最常见的一类特效背景啦。💯

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

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

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。老样子，点赞+评论=你会了，收藏=你精通了。