一、介绍
今天我们继续来制作网页中常见的CSS动画案例，今天要讲的案例是一个进入页面图标依次显示，划入盒子，图标旋转360度，如下图所示。那么开始今天的学习吧!本篇博客仿照一个绿色手机网站制作一些动画效果，网站参考（www.jqueryfuns.com/resource/vi…
二、思路分析
- 首先是基础布局，我们可以通过flex进行基础布局，中间的图标部分可以让其均等分
- 其次我们将icon图标进行导入，设置他的字体大小，以及父级盒子为圆形，0帧时让其缩小为0，同时透明度为0
- 添加动画，让盒子放大为1，透明度为1，注意盒子出现的时间不同，首先是第一个先出来，然后依次显示出来的，这时候设置动画延迟就可以了。
- 再一个就是底部按钮划入变色更改背景颜色以及文字颜色就可以了。
三、基础布局
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标旋转</title>
<link rel="stylesheet" href="./icon/iconfont.css">
</head>
<body>
<div class="App">
<!-- 最大的标题 -->
<h1>Core Benefits of WebApp</h1>
<!-- 标题下的描述 -->
<p>Suspendisse a arcu efficitur erat auctor viverra. Morbi molestie arcu vitae dolor mollis iaculis aptent
taciti sociosqu ad
</p>
<p>litora torquent vel tellus nec urna ultricies bibendum</p>
<!-- 下面主要圆型图标父级盒子 -->
<div class="icon_circle">
<!-- 每一个icon圆形盒子,一共四个 -->
<div class="item">
<div>
<div class="item_div">
<i class="iconfont icon-beizi01"></i>
</div>
</div>
<p>Customer Support</p>
<span>Fusce congue, nibh ut varius volutpat, nisi </span>
<span>dolor congue metus, id eleifend turpis</span>
</div>
<!-- icon盒子2 -->
<div class="item item2">
<div>
<div class="item_div">
<i class="iconfont icon-shouji"></i>
</div>
</div>
<p>Easy To Use</p>
<span>Fusce congue, nibh ut varius volutpat, nisi </span>
<span>dolor congue metus, id eleifend turpis</span>
</div>
<!-- icon盒子3 -->
<div class="item item3">
<div>
<div class="item_div">
<i class="iconfont icon-chat"></i>
</div>
</div>
<p>Social Connect</p>
<span>Fusce congue, nibh ut varius volutpat, nisi </span>
<span>dolor congue metus, id eleifend turpis</span>
</div>
<!-- icon盒子4 -->
<div class="item item4">
<div>
<div class="item_div">
<i class="iconfont icon-wenjianjia"></i>
</div>
</div>
<p>Many Applications</p>
<span>Fusce congue, nibh ut varius volutpat, nisi </span>
<span>dolor congue metus, id eleifend turpis</span>
</div>
</div>
<!-- 底部的按钮 -->
<div class="btn">
<i class="iconfont icon-yuyue"></i>
<span>MORE BENEFITS FOR YOU</span>
</div>
</div>
</body>
</html>
2.css
<style>
/*去除p标签默认样式*/
p {
margin: 0;
padding: 0;
}
/*设置最大盒子的宽高，让其水平居中，距离顶部100px*/
.App {
width: 60vw;
margin: 100px auto;
/*设置盒子为flex布局*/
display: flex;
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;
/*按照y轴垂直排列*/
flex-direction: column;
}
/*设置字体颜色*/
.App>p {
color: #8a8a8a;
}
/*设置icon最大盒子为父级100%，高度由子级撑开*/
.icon_circle {
width: 100%;
/*设置flex布局，居于两边平均排列*/
display: flex;
justify-content: space-between;
}
.item {
/*单个icon圆形盒子的设置。让内容垂直水平居中，垂直排列*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/*设置宽和高*/
width: 280px;
/*距离顶部距离*/
margin-top: 80px;
}
.item>div {
/*设置icon外面的盒子，宽高，圆角，背景颜色，字体颜色，字体大小，水平居中*/
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #56cc91;
color: white;
font-size: 85px;
text-align: center;
line-height: 200px;
}
.item>p {
/*设置文字大小以及距离上下的位置*/
margin-top: 10px;
margin-bottom: 10px;
font-size: 15px;
}
.item>span {
font-size: 13px;
color: #8a8a8a;
}
/*设置最底部盒子宽高，背景颜色，边框，字体颜色，行高，圆角，距离顶部位置*/
.btn {
width: 300px;
height: 40px;
background-color: #56cc91;
border: 2px solid #56cc91;
color: white;
text-align: center;
line-height: 40px;
border-radius: 8px;
margin-top: 20px;
}
</style>
那么至此我们就完成了基础页面的布局，接下来我们就来制作页面的一个交互效果。
四、交互效果
接下来我们继续来完善我们的css代码。
1.划入绿色圆形盒子的交互效果
/*划入绿色圆形的盒子的hover 效果，首先是盒子放大*/
.item:hover>div {
/*使用css2D 中的scale实现，放大自身的1.1倍*/
transform: scale(1.1);
}
/*划入绿色圆形的盒子的hover 效果，其次是icon图标需要旋转-360度*/
.item:hover>div>.item_div {
transform: rotate(-360deg);
}
.item_div {
/*开始旋转为0*/
transform: rotate(0);
/*给盒子添加过渡效果*/
transition: all .8s;
}
2.进入页面时盒子依次显示效果
.item {
/*单个icon圆形盒子的设置。让内容垂直水平居中，垂直排列*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/*设置宽和高*/
width: 280px;
/*距离顶部距离*/
margin-top: 80px;
/*给盒子添加动画 */
animation: icon 1s forwards linear;/*animation：动画名 持续时间 结束时显示 匀速*/
}
.item2 {
/*设置其他盒子的动画，设置延时*/
transform: scale(0);
animation: icon 1s .2s forwards linear;/*animation: 动画名 持续时间 延时 动画完成后位置 匀速*/
}
.item3 {
transform: scale(0);
animation: icon 1s .3s forwards linear;
}
.item4 {
transform: scale(0);
animation: icon 1s .4s forwards linear;
}
3.底部按钮划入时的交互
.btn {
width: 300px;
height: 40px;
background-color: #56cc91;
border: 2px solid #56cc91;
color: white;
text-align: center;
line-height: 40px;
border-radius: 8px;
margin-top: 20px;
/*添加过渡效果就不会很生硬*/
transition: all .7s;
}
.btn:hover {
/*划入后背景颜色变为白色*/
background-color: white;
/*字体颜色变为绿色*/
color: #56cc91;
}
至此，我们的网页布局以及交互就完成了，来看一下效果展示吧！
五、最终效果
那么本节内容就到此结束了，希望本篇文章对小伙伴们有所帮助，我们下一节内容再见哦~
