hexo-theme-wang/source/css/first_screen.styl

a hexo theme minimalism

.first-screen {
    position: sticky;
    height: 100vh;
    z-index: 1;

    /* 通用容器样式 */
    [class$="-container"] {
        position: relative;
        height: 50%;
        z-index: 2;

        /* 通过伪元素实现背景和剪裁 */
        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1; /* 背景层 */
        }

        /* 内容容器始终在上层 */
        .container {
            position: absolute;
            z-index: 2;
        }
    }

    /* 左上角三角形容器 */
    .lefttop-container {
        &::before {
            clip-path: polygon(100% 0, 0 0, 0 100%);
            background: rgba(0, 0, 0, 0.342);
        }

        .container {
            top: 15%;
            left: 15%;
        }
    }

    /* 右下角三角形容器 */
    .rightbottom-container {
        &::before {
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
            background: rgba(129, 129, 129, 0.363);
        }

        .container {
            bottom: 15%;
            right: 15%;

            /* 社交链接网格优化 */
            .social_links {
                display: grid;
                gap: 15px; /* 增加间距 */
                list-style: none;
                margin: 0;
                padding: 0;

                /* 图片尺寸控制 */
                img {
                    width: 35px;
                    height: 35px; /* 固定宽高比 */
                    object-fit: contain; /* 防止拉伸 */
                    transition: transform 0.3s; /* 悬停动效 */
                }

                /* 可选：悬停放大效果 */
                a:hover img {
                    transform: scale(1.1);
                }
            }
        }
    }


    .description-io {
        position: absolute;  // 确保其在父容器内绝对定位
        z-index: 99;  // 设置较高的z-index
        left: 50%;  // 水平居中
        top: 50%;  // 垂直居中
        transform: translate(-50%, -50%);  // 水平垂直居中
        background-color: rgba(0, 0, 0, 0.205);  // 添加半透明背景
        padding: 1rem;  // 添加内边距
        border-radius: 8px;  // 添加圆角
        text-align: center;  // 居中文本
        color: #ffffff;  // 设置文本颜色
    }

    .typed-cursor, .cursor {
        font-size: 1.5rem;
        color: #00ffff;
        animation: blink 0.7s infinite;
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
}