搜索

当前位置:首页 > 全栈分享 > 综合应用 > 正文

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

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

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

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

下面就把代码贴出来:

html:
  1. <div id="say1" style="display:none;">这世界在匆忙改变</div> 
  2. <div id="say2" style="display:none;">正如我空了的心情,也需要走远</div> 
  3. <div id="say3" style="display:none;">--风依YU</div> 
注意:既然是淡入,刚开始就一定是隐藏的,所以style="display:none"必须写。

js:
  1. <script> 
  2.     $(document).ready(function () { 
  3.         $("#say1").fadeIn(2000); 
  4.         $("#say2").fadeIn(4000); 
  5.         $("#say3").fadeIn(6000); 
  6.     }); 
  7. </script> 
注意:淡入效果实现的前提是加载一个可以实现jQuery特效的js库,本网站js库下载链接:https://pan.baidu.com/s/1i4VY61J    提取密码:n5xv

css:
  1. #say1 { 
  2.     positionabsolute
  3.     left: 40%
  4.     animation: myfirst1 3s; 
  5.     animation-fill-mode: forwards; 
  6. @keyframes myfirst1 { 
  7.  0% { 
  8. left:0px
  9. top:0px
  10.  100% { 
  11. left:200px
  12. 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{),得一个一个分开写,不然起不了兼容效果。

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

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:点击弹出div层页面不可操作下一篇:返回列表

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包