CSS怎样制作悬浮提示框阴影扩散？filter: blur渐变过渡

filter: blur

box-shadow

filter: blur

transition

hover

<style>
/* 基础样式，让页面看起来不那么光秃秃 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* 触发元素容器 */
.tooltip-container {
    position: relative; /* 确保提示框可以相对定位 */
    display: inline-block; /* 包裹内容，避免占满一行 */
    padding: 15px 25px;
    background-color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-out; /* 容器自身的微弱动画 */
}

/* 提示框本体 */
.tooltip {
    visibility: hidden; /* 初始隐藏 */
    opacity: 0; /* 初始透明 */
    position: absolute;
    top: -10px; /* 向上偏移，根据箭头位置调整 */
    left: 50%;
    transform: translateX(-50%) translateY(-100%); /* 居中并向上移动自身高度 */
    padding: 10px 15px;
    background-color: #2c3e50; /* 深色背景 */
    color: #ecf0f1; /* 浅色文字 */
    border-radius: 6px;
    white-space: nowrap; /* 避免文字换行 */
    font-size: 14px;
    z-index: 10;
    /* 核心动画属性 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 初始小阴影 */
    filter: blur(0px); /* 初始不模糊 */
    transition: opacity 0.4s ease-out, 
                transform 0.4s ease-out, 
                box-shadow 0.4s ease-out, 
                filter 0.4s ease-out; /* 所有动画属性的过渡 */
    pointer-events: none; /* 确保提示框不阻挡鼠标事件 */
}

/* 提示框的小箭头 */
.tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px; /* 箭头底部对齐提示框底部 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent; /* 箭头颜色与提示框背景一致 */
    display: block;
}

/* 鼠标悬停在触发元素上时的效果 */
.tooltip-container:hover .tooltip {
    visibility: visible; /* 显示 */
    opacity: 1; /* 完全不透明 */
    transform: translateX(-50%) translateY(-110%); /* 向上微移，增加动感 */
    /* 阴影扩散与模糊效果 */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); /* 阴影扩散并加深 */
    filter: blur(2px); /* 增加模糊度，产生扩散感 */
}

/* 触发元素在hover时可以有自己的微小变化 */
.tooltip-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

</style>

<div class="tooltip-container">
    悬停查看提示
    <div class="tooltip">
        这是一个带有扩散阴影和模糊效果的提示！
    </div>
</div>

box-shadow

box-shadow

filter: blur

box-shadow

filter: blur

box-shadow

filter: blur

filter

filter

blur

blur

transform

translateX

translateY

scale

opacity

transform

filter

box-shadow

filter: blur

filter: blur

transition

will-change

will-change: opacity, transform, box-shadow, filter;

will-change

transform: scale()

clip-path

transition

transform: translateY()

opacity

transition-delay

position

transform

hover

transform-origin

aria-describedby

role="tooltip"