CSS3 Animation实现加载动画

最新推荐文章于 2024-07-24 10:22:02 发布

李牙刷儿_

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量862

点赞数

分类专栏：前端文章标签： css3 动画

本文链接：https://blog.csdn.net/asiaLIYAZHOU/article/details/78836837

版权

本文介绍了如何利用CSS3的Animation属性制作加载动画。通过分析动画构成，分为边框动画和内部矩形动画两部分详细讲解，展示了如何通过关键帧实现四边边框和矩形的动态效果。

摘要由CSDN通过智能技术生成

利用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: