快捷搜索:  汽车  科技

h5画面滚动模板(h5动画库wow介绍原创)

h5画面滚动模板(h5动画库wow介绍原创)在需要动画特效的页面加载上面文件l wow.min.js javascript文件1.1.1 使用步骤下载文件:l animate.css 动画样式

通过H5和CSS3提供的原生动画,复杂度很高,需要深入对其知识的了解。

下面我们用个第三方的动画库,实现特效就特别简单,这也是实际开发的方式,不要重复发明轮子,好用就直接拿来用!

官网:

https://www.delac.io/wow/index.html

1.1.1 使用步骤

下载文件:

l animate.css 动画样式

l wow.min.js javascript文件

在需要动画特效的页面加载上面文件

在<head>标签中引样式表:

<link rel="stylesheet" href="css/animate.css">

在文件尾<html>标签前引入js交互支持

<!-- Wow -->

<script src="js/wow.min.js"></script>

<script>

new WOW().init();

</script>

在div标签的class属性中增加wow,class支持多属性,相同修饰css,后面的属性覆盖前面的属性。

<div class="please wow" style="visibility: visible; animation-name: fadeInDown;">请您留意取餐账单号</div>

l visibility: visibale 当页面滚动到被修饰的标签时,才展示特效。

l animation-name是wow中已经定义好的特效,具体参见官网中How to user?

h5画面滚动模板(h5动画库wow介绍原创)(1)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/animate.css"/>

<title></title>

<style>

body{

margin: 10px;

font-size: 8px;

}

div{

line-height: 26px;

margin: 5px;

padding-left: 5px;

color: #FFFFFF;

width: 310px;

}

.subtitle{

font-weight:bold;

font-size: 16px;

color: #000000;

text-align: center;

}

.small-title1{

background-color: #008CF4;

}

.small-title2{

background-color: #FC3E42;

}

.number{

display: inline-table;

border-radius: 20px;

background-color: #000;

width: 14px;

height: 14px;

line-height: 14px;

text-align: center;

vertical-align: middle;

color: #fff;

margin-right: 10px;

}

</style>

</head>

<body>

<div class="subtitle wow" style="animation-name: fadeInDown;">第一部分:基础知识进阶(齐雷)</div>

<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="0.5s"><span class="number">1</span>新接口规范、Lambda表达式、Stream流、新日期</div>

<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1s"><span class="number">2</span>多线程、并发安全、锁优化、高级集合、JUC并发</div>

<div class="small-title1 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="1.5s"><span class="number">3</span>NIO原理分析、RPC设计以及框架中NIO的应用实现</div>

<div class="small-title2 wow" style="animation-name: fadeInDown;" data-wow-duration="1s" data-wow-delay="2s"><span class="number">4</span>手写类加载器、JVM调优、GC算法及优化</div>

<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-delay="1s">第二部分:数据结构和算法(齐雷)</div>

<div class="small-title1"><span class="number">5</span>时间复杂度、空间复杂度分析、存储结构分析</div>

<div class="small-title2"><span class="number">6</span>手写数组ArrayList和链表LinkedList</div>

<div class="small-title1"><span class="number">7</span>栈、队列、散列表结构分析及手写实现</div>

<div class="subtitle wow" style="animation-name: fadeInRight;" data-wow-dela

猜您喜欢: