高亮

高亮边框

 "The trouble is, you think you have time." — Buddha （问题在于，你总以为还有时间。） 
 "Life is short, smile while you still have teeth." — Anonymous （人生苦短，趁还有牙的时候多笑笑。） 
 "The only true wisdom is in knowing you know nothing." — Socrates （唯一真正的智慧是知道自己一无所知。） 
 "I have not failed. I've just found 10,000 ways that won't work." — Thomas Edison （我并未失败，只是找到了一万种不可行的方法。） 
 "Knowing yourself is the beginning of all wisdom." — Aristotle （认识自己是一切智慧的开端。） 
 "Fortune favors the bold." — Virgil （命运眷顾勇者。） 

查看完整代码

vue

<template>
    <!-- 容器 -->
    <div class="highlight-container">
        <!-- 卡片 -->
        <div class="card">
            <!-- 内容 -->
            <div class="inner">
                "The trouble is, you think you have time."
                — Buddha
                （问题在于，你总以为还有时间。）
            </div>
        </div>
        <div class="card">
            <div class="inner">
                "Life is short, smile while you still have teeth."
                — Anonymous
                （人生苦短，趁还有牙的时候多笑笑。）
            </div>
        </div>
        <div class="card">
            <div class="inner">
                "The only true wisdom is in knowing you know nothing."
                — Socrates
                （唯一真正的智慧是知道自己一无所知。）
            </div>
        </div>
        <div class="card">
            <div class="inner">
                "I have not failed. I've just found 10,000 ways that won't work."
                — Thomas Edison
                （我并未失败，只是找到了一万种不可行的方法。）
            </div>
        </div>
        <div class="card">
            <div class="inner">
                "Knowing yourself is the beginning of all wisdom."
                — Aristotle
                （认识自己是一切智慧的开端。）
            </div>
        </div>
        <div class="card">
            <div class="inner">
                "Fortune favors the bold."
                — Virgil
                （命运眷顾勇者。）
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue';

onMounted(() => {

    const containerEl = document.querySelector('.highlight-container') as HTMLElement;
    const cardEls = document.querySelectorAll('.card') as NodeListOf<HTMLElement>;

    // 鼠标移动事件
    containerEl.onmousemove = (e: MouseEvent) => {
        cardEls.forEach((card) => {
            if (!card) return; // 确保元素存在
            const rect = card.getBoundingClientRect(); // 获取容器的边界信息
            const x = e.clientX - rect.left - rect.width / 2; // 鼠标离视口的距离 - 容器左边缘的距离 - 容器宽度的一半
            const y = e.clientY - rect.top - rect.height / 2; // 同上

            card.style.setProperty('--x', `${x}px`); // 设置高亮区域的 X 坐标
            card.style.setProperty('--y', `${y}px`); // 设置高亮区域的 Y 坐标
        });
    };
});
</script>

<style lang="scss" scoped>
.highlight-container {
    width: 100%;
    height: 600px;
    background-color: #333;
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    text-align: center;
}

// 第一层 卡片
.card {
    border-radius: 8px;
    background-color: #444;
    position: relative;
    overflow: hidden;
}

// 第二层 高亮区域
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    // 径向渐变(最短边为半径，逐渐透明)
    background: radial-gradient(closest-side circle, #fff, transparent);
    // 移动到鼠标位置，给个初始值，避免初始时出现动画
    transform: translate(var(--x, -1000000px), var(--y, -1000000px));
}

// 第三层 内容
.inner {
    position: absolute;
    inset: 2px;
    padding: 2px;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
}
</style>

高亮 ​

高亮边框 ​

高亮代码 ​

高亮

高亮边框

高亮代码