个人站——作品集页面设计

项目目标

步骤一：引入BootStrapCDN及wow.js/animate.css

首先我们需要引入bootStrap的CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<!--引入jquery-->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!--引入wow.js 和 animate.css文字效果-->

<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">

步骤二：构建设计基本的样式布局

步骤三：设置样式，将最外层的div设置成弹性布局，居中展示内容

步骤四：使用wow.js添加动画效果

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

先实例化wow.js再去使用它

<!--//实例化wow.js-->

<script>

new WOW().init();

</script>

往自己的项目中添加动画效果

希望本教程对大家有所帮助，得到启发，项目源码：

链接：https://pan.baidu.com/s/19oqi8dQgOSAzbk9e9zjpaw

提取码：q4ow