用到的css属性介绍及效果展示

文字渐变

1. linear-gradient 是 CSS 中的一个背景属性，用于创建线性渐变背景。通过 linear-gradient，可以在元素的背景中创建平滑的颜色过渡，从一个颜色到另一个颜色，形成一个渐变效果.

2. background-clip,用于控制背景图片或颜色的绘制区域。通过设置 background-clip，可以定义背景的绘制范围，使背景图片或颜色只在指定的区域内绘制，而在其他区域不显示。

文字交融展开

letter-spacing 是一个用于调整字符之间水平间距的 CSS 属性。通过改变字符之间的间距

效果展示

代码

html部分

 <div class="packing">
        <div class="content">
            <div class="text">Hello Wordl</div>
        </div>
 </div>

css部分

   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        padding: 100px 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to right, #666, #000);
        /* 添加透视 */
        perspective: 1000px;
    }

    .packing {
        margin: 0 auto;
        width: 70%;
    }

    .packing>.content {
        /* 文本渐变色 */
        background: linear-gradient(90deg, #fcdf8a, #f38381);
        -webkit-background-clip: text;
        background-clip: text;
        text-align: center;
        color: transparent;
        font-size: 80px;
        /* 开启3d效果及动画 */
        transform-style: preserve-3d;
        animation: showup 3s forwards;
    }
    /*  动画 */
    @keyframes showup {
        from {
            transform: rotateY(85deg);
            letter-spacing: -50px;
        }
        to {
            transform: rotateY(0deg);
            letter-spacing: 10px;
        }
    }