搜索

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

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

发布时间: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-(兼容Opera浏览器)、-webkit-(兼容Safari和……),管它兼容什么,全写上就行了;
(4)@keyframes的兼容性不能这样写([email protected] myfirst1),也不能这样写(@keyframes myfirst1,@-moz-keyframes myfirst1,@-moz-keyframes myfirst1{),得一个一个分开写,不然起不了兼容效果。


如果您觉得本文帮助到了您,请点击下方的广告赞助一下,谢谢!

魏义齐全栈技术交流:魏义齐web前端技术交流

打赏本站

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

上一篇:第一页 下一篇:点击弹出div层页面不可操作

相关阅读