2024年终总结丨苦尽甘来终有时，一路向阳待花期

文章目录

写在前面

不知不觉又到年末了，还有一周就过年了，回望今年，经历了很多的事情，也参加了许多活动，让我成长了很多，用一个词语总结一下今年，我觉得非常的“充足”。

博主简介

  • CSDN-2022年度社区之星Top2
  • CSDN-2022年度城市之星Top2
  • CSDN-2023年度博客之星Top16
  • 清华大学出版社2023年度至臻伙伴
  • 清华大学出版社2024年度最佳荐书官
  • 百度·文心智能体平台2024年度Top100智能体开发者
  • 百度搜索·文心智能体大赛优胜奖
  • 文心智能体大赛·生活情感类Top1
  • 文心智能体大赛·春节挑战赛Top10
  • 文心智能体大赛·奥运挑战赛优秀奖
  • 阿里云专家博主
  • 华为云云享专家

参加活动

今年参加了许多百度举办的活动，比如百度万象大会，百度搜索·文心智能体大赛，这些活动让我成长了很多。

00

01

02

03

优质专栏

今年新开了4个付费专栏，收录了博主在2023年开发的许多原创趣味案例代码，订阅量达到500+，目前还在持续更新中。

05

06

07

新的起点

希望2025年继续努力，参加更多的活动，开发出更多优质的代码和智能体，结实更多的大佬。
2025年是新的起点，我想给自己定一些小目标：

  1. 全网粉丝突破 20w
  2. 开发更多优质的智能体
  3. 参加更多活动
  4. 至少写100篇博客

新春代码

今年开发了许多优质代码，我想在这里给大家分享一些新春烟花代码，祝大家春节快乐！

08

09

10

11

主要代码

DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>新年快乐title>
head>
 
<body>
  <script src="js/gameCanvas-4.0.js">script>
  <script src="js/script.js">script>
  
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js">script>
  
 
  
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css" />
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js">script>
  <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js">script>
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js">script>
  <script type="text/javascript">
    $("#cnblogs_post_body img").attr("data-action", "zoom");
  script>
  
 
  
  <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js">script>
  <canvas width="1777" height="841" style="
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 2147483647;
        pointer-events: none;
      ">canvas>
  
 
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js">script>
  
  <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">script>
  <meting-js id="2829883282" lrc-type="0" server="netease" order="random" type="playlist" fixed="true" autoplay="false"
    list-olded="true">
  meting-js>
 
  
  <script>
    !(function () {
      function n(n, e, t) {
        return n.getAttribute(e) || t;
      }
      function e(n) {
        return document.getElementsByTagName(n);
      }
      function t() {
        var t = e("script"),
          o = t.length,
          i = t[o - 1];
        return {
          l: o,
          z: n(i, "zIndex", -1),
          o: n(i, "opacity", 0.6),
          c: n(i, "color", "148,0,211"),
          n: n(i, "count", 99),
        };
      }
      function o() {
        (a = m.width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth),
          (c = m.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight);
      }
      function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function (i, x) {
          for (
            i.x += i.xa,
            i.y += i.ya,
            i.xa *= i.x > a || i.x < 0 ? -1 : 1,
            i.ya *= i.y > c || i.y < 0 ? -1 : 1,
            r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
            e = x + 1;
            e < u.length;
            e++
          )
            (n = u[e]),
              null !== n.x &&
              null !== n.y &&
              ((o = i.x - n.x),
                (m = i.y - n.y),
                (l = o * o + m * m),
                l < n.max &&
                (n === y &&
                  l >= n.max / 2 &&
                  ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
                  (t = (n.max - l) / n.max),
                  r.beginPath(),
                  (r.lineWidth = t / 2),
                  (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
                  r.moveTo(i.x, i.y),
                  r.lineTo(n.x, n.y),
                  r.stroke()));
        }),
          x(i);
      }
      var a,
        c,
        u,
        m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x =
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (n) {
            window.setTimeout(n, 1e3 / 45);
          },
        w = Math.random,
        y = { x: null, y: null, max: 2e4 };
      (m.id = l),
        (m.style.cssText =
          "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
        e("body")[0].appendChild(m),
        o(),
        (window.onresize = o),
        (window.onmousemove = function (n) {
          (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
        }),
        (window.onmouseout = function () {
          (y.x = null), (y.y = null);
        });
      for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
          g = w() * c,
          v = 2 * w() - 1,
          p = 2 * w() - 1;
        s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
      }
      (u = s.concat([y])),
        setTimeout(function () {
          i();
        }, 100);
    })();
  script>
 
  
  <script type="text/javascript">
    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('
')
          .css({ position: "absolute", "z-index": "9999", top: "-50px" })
          .html("❄"),
          documentHeight = $(document).height(),
          documentWidth = $(document).width(),
          defaults = {
            minSize: 10,
            maxSize: 20,
            newOn: 1000,
            flakeColor:
              "#FFFFFF",
          },
          options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
          var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 200,
            endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
            durationFall = documentHeight * 10 + Math.random() * 5000;
          $flake
            .clone()
            .appendTo("body")
            .css({
              left: startPositionLeft,
              opacity: startOpacity,
              "font-size": sizeFlake,
              color: options.flakeColor,
            })
            .animate(
              {
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.2,
              },
              durationFall,
              "linear",
              function () {
                $(this).remove();
              }
            );
        }, options.newOn);
      };
    })(jQuery);
    $(function () {
      $.fn.snow({
        minSize: 5 /* 定义雪花最小尺寸 */,
        maxSize: 80 /* 定义雪花最大尺寸 */,
        newOn: 200 /* 定义密集程度，数字越小越密集 */,
      });
    });
  script>
body>
 
html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213

这段代码实现了多个特效的组合，包括随机线条、雪花特效、鼠标特效以及图像放大效果，主要通过 JavaScript 和一些外部库来实现。

  1. HTML结构：页面使用了 元素来承载特效，其中随机线条和雪花特效会在该画布上渲染。此外，还引入了多个 JavaScript 库和样式文件，包括 Live2D 动画、图片放大、鼠标点击特效等。

  2. 随机线条特效：这部分代码通过一个 元素生成不断变化的线条，模拟了类似星空的视觉效果。通过监听鼠标位置，可以使线条的相互连接产生互动的动态效果，增加页面的趣味性。

  3. 雪花特效：使用了 jQuery 实现雪花下落的效果。雪花的大小、透明度和下落速度都可以定制，形成冬季雪景的动画效果。该特效通过 setInterval 定时生成雪花元素，并使用 animate 方法模拟雪花的下落过程。

  4. 鼠标特效：该代码使得鼠标点击时，产生一些小的图形或动画效果，增强互动性。这种效果通常用于增加页面的动态感。

  5. 图片放大效果：通过引入一些外部 CSS 和 JS 文件，使页面上的图片在鼠标悬停时自动放大，提升用户体验。

综上所述，这段代码综合了视觉特效和互动功能，提升了页面的动感和吸引力。

写在最后

我是一只有趣的兔子，感谢你的喜欢。

商务合作
微信名片
注：本文转载自blog.csdn.net的Want595的文章"https://blog.csdn.net/m0_68111267/article/details/145258938"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！