前端小练习：loading动画效果

最新推荐文章于 2023-07-06 16:23:33 发布

illion-78

最新推荐文章于 2023-07-06 16:23:33 发布

阅读量284

点赞数

分类专栏：前端（demo）文章标签： css

本文链接：https://blog.csdn.net/weixin_39233022/article/details/105068282

版权

前端（demo）专栏收录该内容

10 篇文章 0 订阅

订阅专栏

loading动画效果

效果图
在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>loadinigåŠ¨ç”»</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!-- 粉色背景图 -->
    <div class="container">
      <!-- 文字板块 -->
      <div class="text">
        <h1>HAPPY NEW YEAR</h1>
        <h4>Light your fire</h4>
      </div>
      <!-- 橙色小怪 -->
      <div class="monster">
        <!-- 眼睛 -->
        <div class="eye">
          <!-- 眼球 -->
          <div class="eyeball"></div>
        </div>
        <!-- 嘴巴 -->
        <div class="mouth"></div>
      </div>
      <!-- 蓝色小怪 -->
      <div class="monster blue">
        <div class="eye">
          <div class="eyeball"></div>
        </div>
        <div class="mouth"></div>
      </div>
    </div>
    <!-- 蓝色背景图 -->
    <div class="page-loading">
      <div class="monster">
        <div class="eye">
          <div class="eyeball"></div>
        </div>
        <div class="mouth"></div>
      </div>
      <!-- 进度条 -->
      <div class="loading">
        <div class="bar"></div>
      </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

CSS代码

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #DB4D6D;
  display: flex;
  /* 沿着主轴方向对齐方式：居中 */
  justify-content: center;
  /* 沿着侧轴（交叉轴）方向对齐方式：居中 */
  align-items: center;
}
.text {
  color: #fff;
  text-align: center;
}
.text h1 {
  font-size: 40px;
}
.text h4 {
  /* 透明度 */
  opacity: 0.5;
}
.monster {
  width: 110px;
  height: 100px;
  border-radius: 20px;
  background-color: #e55A54;
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* position的默认值为static */
  position: relative;
  /* 阴影部分 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  /* 动画 */
  animation: jumping 0.8s infinite alternate;
}
.monster.blue {
  background-color: #0C4475;
  /* 动画延迟 */
  animation-delay: 0.5s;
}
.monster .eye {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.monster .mouth {
  width: 30%;
  height: 12px;
  background-color: #fff;
  border-radius: 12px;
  margin-top: 15px;
}
.monster.blue .mouth {
  background-color: #e55A54;
}
.monster .eye .eyeball {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #0C4475;
  animation: eyemove 1s alternate infinite linear;
}
.monster.blue .eye .eyeball {
  background-color: #e55A54;
}
.monster::before, .monster::after {
  content: '';
  width: 20%;
  height: 10px;
  border-radius: 10px;
  /* display: block; */
  background-color: #fff;
  position: absolute;
  top: -10px;
}
/* 白色眉毛 */
.monster::before {
  transform: translateX(-20%) rotate(45deg) ;
}
.monster::after {
  transform: translateX(20%) rotate(-45deg);
}

@keyframes jumping {
  0% {
    top: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  50% {
    top: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    top: -50px;
    box-shadow: 0 120px 20px rgba(0, 0, 0, 0.2);
  }
}

@keyframes eyemove {
  0% {
    transform: translateX(0%);
  }
  10% {
    transform: translateX(0%);
  }
  90% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.page-loading {
  width: 100%;
  height: 100%;
  background-color: #0C4475;
  position: fixed;
  top: 0px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading {
    width: 200px;
    height: 8px;
    background: #fff;
    border-radius: 5px;
    margin-top: 50px;
    overflow: hidden;
}
.loading .bar {
  height: 100%;
  width: 0%;
  background-color: #e55A54;
}
/* 进度条动画 */
.page-loading.complete {
  /* display: none; */
  transition: opacity 0.8s;
  opacity: 0;
}
/* 小怪缩回动画 */
.page-loading.complete .monster {
  transition: transform 0.8s;
  transform: scale(0.01) rotate(360deg);
}

JavaScrip代码

var per = 0;
var bar = document.getElementsByClassName('bar')[0];
var pageLoadding = document.getElementsByClassName('page-loading')[0]
var timer = setInterval(function () {
  per++;
  bar.style.width = per + '%';
  if (per == 100) {
    clearInterval(timer);
    // classList 每个dom元素的属性  这个属性是用来操作class类名的
    //           add代表在class里面添加一个class类名
    pageLoadding.classList.add('complete');
  }
}, 30);

illion-78

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小练习：loading动画效果

loading动画效果效果图HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫