网站特效之文字的淡入漂移

发布时间：2017-07-17 22:01:42作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载。

本文讲述本站头部的文字淡入漂移效果是怎么做出来的，主要用到两个知识点，一是jQuery的fadeIn()方法，一是css3的animation属性和@keyframes规则。

下面就把代码贴出来：

html：

<div id="say1" style="display:none;">这世界在匆忙改变</div>

<div id="say2" style="display:none;">正如我空了的心情，也需要走远</div>

<div id="say3" style="display:none;">--风依YU</div>

注意：既然是淡入，刚开始就一定是隐藏的，所以style="display:none"必须写。

js：

<script>

    $(document).ready(function () {

        $("#say1").fadeIn(2000);

        $("#say2").fadeIn(4000);

        $("#say3").fadeIn(6000);

    });

</script>

注意：淡入效果实现的前提是加载一个可以实现jQuery特效的js库，本网站js库下载链接：https://pan.baidu.com/s/1i4VY61J 提取密码：n5xv

css：

#say1 {

    position: absolute;

    left: 40%;

    animation: myfirst1 3s;

    animation-fill-mode: forwards;

}

@keyframes myfirst1 {

0% {

left:0px;

top:0px;

}

100% {

left:200px;

top:0px;

}

}

注意：

（1）具体的样式没有写，只写了最主要的；

（2）position:absolute定位属性必须给，不给起不了作用；myfirst1是被操作的运动对象，后面的时间是运动所需的时间；animation-fill-mode:forwards是让动画停留在最后一帧；@keyframes大括号里面的是运动过程中样式的变化；

（3）注意兼容性：-moz-、-ms-、-o-、-webkit-，具体的去菜鸟教程查；

（4）@keyframes的兼容性不能这样写（[email protected] myfirst1），也不能这样写（@keyframes myfirst1,@-moz-keyframes myfirst1,@-moz-keyframes myfirst1{），得一个一个分开写，不然起不了兼容效果。

本文标签：，您可以阅读与「」相关的所有文章

魏义齐全栈技术交流：