个人站——技术栈页面设计
项目目标:大圆圈顺时针旋转,小圆圈逆时针旋转,文字及圆圈分从右边和左边动画效果进入,页面展示效果
步骤一:引入BootStrapCDN并创建基本布局
首先我们需要引入bootStrap的CDN
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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