1. 透明图片的格子背景

2、滚动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
        min-height: 500vh;
        background-color: rgb(139, 201, 228);
        animation: body 1s linear;
        animation-play-state: paused;
        animation-delay: calc(var(--scroll) * -1s);
        animation-fill-mode: forwards;
    }
    @keyframes body {
        to {
            background-color: rgb(19, 48, 97);
        }
    }

    .box {
        width: 300px;
        height: 300px;
        border-radius: 10px;
        background: #df685b;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: box 1s linear;
        animation-play-state: paused;
        animation-delay: calc(var(--scroll) * -1s);
        animation-fill-mode: forwards;
    }
    @keyframes box {
        to {
            transform: translate(-50%, -50%) rotate(180deg);
        }
    }
</style>
<body>
<div class="box"></div>
</body>
<script>
  window.addEventListener(
    "scroll",
    () => {
      document.body.style.setProperty(
        "--scroll",
        window.scrollY / (document.body.offsetHeight - window.innerHeight)
      );
    },
    false
  );
</script>
</html>

3、icon-hover

放大点击范围

.cm-hover-icon-light {
    position: relative;
    line-height: 1;
    color: rgba(248, 250, 255, .4);
}

.cm-hover-icon-light:after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    cursor: pointer;
}