[分享]css3文字滑入

CSS3中的文字滑入效果可以为网页增添动感和美观度，使网页活起来。下面是一些CSS3文字滑入的实例：

 /* 设置滑入效果 */
    .slide-in {
        position: relative;
        left: -100px;
        visibility: visible;
        animation: slide-in 0.5s forwards;
    }

    /* 定义滑入动画 */
    @keyframes slide-in {
        0% {
            left: -100px;
            opacity: 0;
        }
        100% {
            left: 0;
            opacity: 1;
        }
    } 

上述代码中，可以看到我们给文字添加了一个.slide-in类，该类的样式定义了文字的初始状态：左偏移100像素并设置透明度为0。然后，我们定义了一个CSS3动画slide-in，它包括从-100px到0px的100%过程。设置了animation属性，告诉浏览器要使用slide-in这个动画效果。

另外一种CSS3文字滑入方式是使用transform属性。下面的代码展示了它的实现过程。

 /* 设置滑入效果 */
    .slide-in {
        display: inline-block;
        transform: translateX(-100%);
        visibility: visible;
        animation: slide-in 1s forwards;
    }

    /* 定义滑入动画 */
    @keyframes slide-in {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    } 

上面这段代码同样是实现了一段文字的滑入效果，在动画中我们使用transform属性来实现文字的左移。通过to关键字，我们指定了动画结束时的文字位置，使文字完成滑入动画。

总之，CSS3的文字滑入特效可以通过多种方式实现，这里提供的只是其中的两个实例。让你的网页爆发动态魅力，并吸引你的访问者。