elementor文本效果-渐隐渐现

CSS写容器，标题和文本各写个类
[zd-plane title=”折叠标题”]
一、标题生长线
/* 让当前容器成为定位父级，并提供一个可调参数 --line-top */
selector {
    position: relative;
    /* 🔧 这里调距离顶部的高度（越大越往下） */
    --line-top: 3.2rem;
}

/* 初始短线：左侧固定，颜色 #FFC000 */
selector::before {
    content: "";
    position: absolute;

    /* 固定在线条左侧 */
    left: 8%;

    /* 距离顶部的高度，用上面的变量控制 */
    top: var(--line-top);

    /* 初始宽度（短线） */
    width: 6rem;

    /* 线条高度（粗细） */
    height: 4px;

    /* 线条颜色 */
    background: #FFFFFF;

    /* 动画过渡效果 */
    transition: width 0.35s ease-in-out;
}

/* 悬停时，从左侧向右增长，左侧不动 */
selector:hover::before {
    width: 14rem;  /* 悬停后的长度 */
}



二、标题和文本框的渐隐渐现
/* 容器的基础样式 */
selector {
    position: relative;   /* 确保容器有定位，允许内部元素绝对定位 */
    overflow: hidden;     /* 确保文本不超出容器 */
    width: 25%;           /* 容器宽度自适应 */
    height: 100%;         /* 容器高度自适应 */
}

/* 标题的动画效果 */
selector .title1-animation {
    position: absolute;   /* 使标题脱离文档流 */
    left: 0;
    right: 0;
    left: 8%;/* 标题居左间距 */
    text-align: left;   /* 标题居左对齐 */
    top: 20%;             /* 设置标题的垂直位置，离容器顶部一定距离 */
    transform: translateY(50px); /* 初始时将标题下移 20px */
    transition: transform 0.6s ease-in-out; /* 只做位移动画 */
    z-index: 2;           /* 确保标题在文本框上方 */
}

selector:hover .title1-animation {
    transform: translateY(0); /* 悬停时标题向上移动到原位置 */
}

/* 通过自定义类应用文本框的动画 */
selector .txet-animation {
    position: absolute;   /* 使文本框脱离文档流 */
    left: 20px;
    right: 20px;
    opacity: 0;           /* 初始时文本透明 */
    text-align: left;   /* 文本框居左对齐 */
    top: 45%;             /* 设置文本框的垂直位置，离容器顶部一定距离 */
    transform: translateY(40px); /* 初始时将文本框下移 60px */
    transition: all 0.6s ease-in-out; /* 渐变动画 */
    z-index: 1;           /* 确保文本框在标题下方 */
}

selector:hover .txet-animation  {
    opacity: 1;                /* 悬停时文本框变为可见 */
    transform: translateY(0);  /* 悬停时文本框浮现到原位置 */
}
[/zd-plane]
elementor文本效果-渐隐渐现

Comments0
