首页 博客模板 网站素材 工具下载 建站教程 个人博客 生活咨询 博客大全

1.响应式网站动态效果方法-用户下滑网页逐渐显示

返回首页 浏览次数:
建华兄
微信号:S411998413 2018-05-25



大家看到很多网站都是动态效果,下滑网页逐渐显示动画效果,这个效果提升网站活力,其实添加也很简单。
方法:
将下载的文件dd.css和dd.js放在网站文件夹,然后网页头部<head>调用下面红色代码</head>,网页需要动态效果的地方加入下面div标签,代码如下:

<html>
<head>
<link rel="stylesheet" type="text/css" href="dd.css">
<script src="dd.js" type="text/javascript"></script>
<script>
var  wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset:0,
live: true
});
wow.init();
</script>
</head>
<body>
<div class="tit wow flash">【闪2下】</div>
<div class="tit wow bounce">【上面抖动2下】</div>
<div class="tit wow pulse">【左边拉伸放大】</div>
<div class="tit wow rubberBand">【左到右快速拉伸】</div>
<div class="tit wow shake">【左右摇摆】</div>
<div class="tit wow swing">【大幅度上下弹跳】</div>
<div class="tit wow tada">【右到左大幅度上下弹跳】</div>
<div class="tit wow wobble">【左到右大幅度上下弹跳】</div>
<div class="tit wow jello">【大幅度上下弹跳】</div>
<div class="tit wow fadeInDown">【从上到下慢慢降落】</div>
<div class="tit wow fadeInDownBig">【大幅度从上到下快速降落】</div>
<div class="tit wow fadeInLeft">【左到右】</div>
<div class="tit wow fadeInRight">【右到左】</div>
<div class="tit wow fadeInUp">【下到上慢慢】</div>
<div class="tit wow fadeInUpBig">【下到上快速】</div>
<div class="wow rubberBand" data-wow-delay="0.7s">当用户到此处0.7秒后【左到右快速拉伸】</div>
<div class="tit  wow  fadeInLeft"  data-wow-delay="2s">当用户到此处2秒后【左到右】</div>
</body>
</html>

转载请注明本文转自“建华兄个人博客
下载失效联系QQ:1249721215
本站所有下载解压密码为:jianhuax.com



热门排行