好看的loading animation

最新推荐文章于 2021-11-01 22:34:51 发布

怪我冷i

最新推荐文章于 2021-11-01 22:34:51 发布

阅读量170

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/e891377/article/details/119379975

版权

大前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

好看的loading animation

[HTML+CSS]5分钟实现惊人的加载动画效果！！！#前端

html代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="loading">
      <span>Loading...</span>
    </div>
  </body>
</html>

css代码

body{
  margin: 0;
  padding: 0;
  background: #34495e;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "montserrat",sans-serif;
}

.loading{
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 10px solid #e74c3c;
  position: relative;
  animation: a1 2s linear infinite;
}

.loading::before,.loading::after{
  content: '';
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
}

.loading::before{
  border-top: 10px solid #e67e22;
  transform: rotate(120deg);
}

.loading::after{
  border-top: 10px solid #3498db;
  transform: rotate(240deg);
}

.loading span{
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
  text-align: center;
  line-height: 200px;
  animation: a2 2s linear infinite;
}

@keyframes a1 {
  to{
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to{
    transform: rotate(-360deg);
  }
}

怪我冷i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
好看的loading animation

好看的loading animation [HTML+CSS]5分钟实现惊人的加载动画效果！！！#前端 html代码<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title>
复制链接

扫一扫