个人站——技术栈页面设计

项目目标：大圆圈顺时针旋转，小圆圈逆时针旋转，文字及圆圈分从右边和左边动画效果进入，页面展示效果

 

步骤一：引入BootStrapCDN并创建基本布局

首先我们需要引入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>

设计出基本布局格式

步骤二：将最外边的div设置成弹性布局并实现第一层旋转的圆圈

将最大的div设置成弹性布局 display:flex，全屏幕展示内容height:100vh并且让它里面的内容全部居中，之后设置出虚拟圆圈，设置成相对定位position:relative,之后好放置各个圆在圈上,最后设置并启动绕着Z轴顺时针的动画moves

使用绝对定位将圆都放置在虚线之上，之后为了能够让文字永远的能够正面展示，文字的旋转方向必须与圆的旋转方式相反。

步骤三：绘制中心部分的小圆圈内容

步骤四：添加文字部分内容

步骤五:引入wow.js和Animate.css的CDN,并实现相关效果

<!--引入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">

使用wow.js，并实例化wow.js

<script>

       new WOW().init();

</script>

首先来到wow.js的官网https://www.delac.io/wow/  找到自己想使用的动画效果

把WOW插件初始化wow

       前面两个使用次数最多

       data-wow-duration 持续时间

       data-wow-delay:延迟

       data-wow-offset:偏移

       data-wow-iteration:重复次数

使用animate.css样式实现字体效果，使用时去官网找到对应的改下名称就可以使用

https://daneden.github.io/animate.css/

<!--延迟3秒后播放animate中的bounce上下跳动动画。-->

class="animated bounce delay-2s"

 

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

链接：https://pan.baidu.com/s/1J4IsPw4TnJ7APHC1tebbxA

提取码：t045