孙振超's Show

我的个站内容宽度只有800像素，字体也很小。现在上岁数了，想放大页面字体。
当我调整页面CSS样式表的字体大小后，发现会有部分页面变形，变得难看。

偶然一次用鼠标调整页面显示比例时，发现放大页面比例，页面不会变形，于是就用JS写了下面的代码：
可以根据用户浏览器打开时的宽度自动调整放大页面的比例。

    <script>
        window.addEventListener('load', function () {
            const browserWidth = window.innerWidth;
            if (browserWidth > 1600) {
                document.body.style.zoom = '125%';
            } else if (browserWidth > 1280) {
                document.body.style.zoom = '110%';
            }
        });
    </script>

将上面的代码放到head里即可。

偶然间在朋友的博客看到这个特效觉得挺好玩，然后就用豆包复刻了这个特效代码。

样式表中添加下面的样式：

/* 鼠标点击时随机出现的文字样式 */
        .word {
            position: absolute;
            pointer-events: none;
            user-select: none;
            font-size: 18px;
            color: #FF5733;
            animation: fadeOut 1s ease-out forwards;
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }