您的位置：首页 > Web前端 > CSS

CSS3 Animation实现加载动画

2017-12-18 20:29 519 查看


利用CSS3中的
animation
，可以实现很多很炫的效果。今天就来利用
animation
属性完成如上图所示的加载效果。

1 基本构图

首先来完成基本的构图：



可以将上述图形解析为四部分：

外部矩形

左侧红色矩形

右下部黄色矩形

右上角白色矩形

划清图形结构后，可以完成基本页面绘制：

<style>
div {
box-sizing: border-box;
}
.logo {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
padding: 4px;
}

.red {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background: red;
border-right: 4px solid black;
}

.yellow {
position: absolute;
left: 25%;
right:0;
bottom: 0;
height: 50%;
background: yellow;
border-top: 4px solid black;
}

.white {
position: absolute;
right:0;
top: 0;
height: 50%;
width: 25%;
background: white;
border-left: 4px solid black;
}
</style>

<body>
<div class="logo">
<div class="red"></div>
<div class="yellow"></div>
<div class="white"></div>
</div>
</body>




可以看出，外部矩形的边框并没有绘制。具体原因暂且按下不表，后面会详细介绍。

2 动画分析

首先来看下，这里的动画总共分为7部分：

四边边框出现

红色矩形出现

黄色矩形出现

白色矩形出现

后面三个矩形出现相对比较容易，难的是四个四边边框的动画效果。由于同侧边框(左右边框/上线边框)并不是同步出现，单纯靠一个矩形的伸缩无法实现，所以至少要依赖两个矩形，这时
::after
::before
两个元素正好可以派上用场：

.logo::before, .logo::after {
position: absolute;
width: 100%;
height: 100%;
content: '';
border: 4px solid transparent;
box-sizing: border-box;
}

.logo::before {
z-index: 1; /*before在所有元素最前面，所以会被覆盖，加上z-index*/
top: 0px;
left: 0px;
animation: border-before 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}

.logo::after {
right: 0px;
bottom: 0px;
animation: border-after 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}


3 边框动画

接下来就可以利用关键帧来实现边框动画了：

@keyframes border-before {
0% {
width: 0;
height: 0;
border-left-color: black;
}

11% {
height: 100%;
width: 0;
border-bottom-color: transparent; /*在25% - 50% 的过程中，boder-bottom-color变成黑色，默认是在25%-50%过程开始是执行，可以通过step设置*/
}

22%, 100% {
height: 100%;
width: 100%;
border-left-color: black;
border-bottom-color: black;
}

}

@keyframes border-after {
0%, 22% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
}

33% {
width: 0;
height: 100%;
border-right-color: black;
border-top-color: transparent;
}

44%, 100% {
height: 100%;
width: 100%;
border-top-color: black;
border-right-color: black;
}

}


4 内部矩形动画

接下来内部矩形的动画，相对就更简单了：

.red {
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;
background: red;
border-right: 4px solid black;
animation: redmove 9s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

@keyframes redmove {
0%,
44% {
width: 0;
opacity: 0;
}
44.01% {
opacity: 1;
}
55%,
100% {
width: 25%;
opacity: 1;
}
}

.yellow {
position: absolute;
left: 25%;
right:0;
bottom: 0;
height: 50%;
background: yellow;
border-top: 4px solid black;
animation: moveyellow 9s infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

@keyframes moveyellow {
0%, 55% {
height: 0;
opacity: 0;
}

55.01% {
opacity: 1;
}

66%, 100% {
height: 50%;
}
}

.white {
position: absolute;
right:0;
top: 0;
height: 50%;
width: 25%;
background: white;
border-left: 4px solid black;
animation: movewhite 9s infinite;
animation-direction: alternate;
animation-timing-function: linear;
}

@keyframes movewhite {
0%, 66% {
width: 0%;
opacity: 0;
}

66.01% {
opacity: 1;
}

77%, 100% {
width: 25%;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 动画
相关文章推荐
新的分享
章节导航