[分享]css3动画让文字飘出

CSS3动画可以让我们的网页变得更加生动有趣，今天我们就来学习一种让文字飘出的动画效果。首先，我们需要在CSS中先定义好我们的文字样式，比如字号、颜色等等。然后，我们来谈一下动画属性的设置。 .fly...

CSS3动画可以让我们的网页变得更加生动有趣，今天我们就来学习一种让文字飘出的动画效果。

首先，我们需要在CSS中先定义好我们的文字样式，比如字号、颜色等等。然后，我们来谈一下动画属性的设置。

  .fly-out {
        animation-name: fly-out;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    @keyframes fly-out {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(-100px);
            opacity: 0;
        }
    } 

上面的代码中，我们为需要飘出的文字添加了一个类名。该类名对应的css规则中，我们设置了动画名称为fly-out，动画时长为2秒，动画循环次数为无限次。

接下来，我们定义了动画fly-out的具体细节。我们使用了transform: translateY()来让文字在垂直方向上移动，同时opacity属性也随着移动发生了变化，从1到0。这样就可以让文字逐渐消失，营造出文字被风吹走的效果。

最后，在HTML中引入我们的CSS文件，并把要飘出的文字用标签包括起来，并添加fly-out类名即可：

  <p class="fly-out">文字内容</p> 

适当调整一下动画的细节参数，就可以让文字飘出的效果恰到好处了。