zoukankan      html  css  js  c++  java
  • 五分钟实现炫酷的加载效果

    在网页加载相关内容的时候为用户加上一个合适的加载过程动画或者文字提示,可以转移用户注意,提高用户体验。统计显示随着网页更新时间越长,用户流失越多。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           body{
      margin: 0;
      padding: 0;
      background: #b929b5;
    }
    .loading{
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      height: 40px;
      display: flex;
      align-items: center;
    }
    .item{
       6px;
      height: 40px;
      background: #fff;
      margin: 0 3px;
      border-radius: 10px;
      animation: loading 0.8s infinite;
    }
    .item:nth-child(2){
      animation-delay: 0.1s;
    }
    .item:nth-child(3){
      animation-delay: 0.2s;
    }
    .item:nth-child(4){
      animation-delay: 0.3s;
    }
    .item:nth-child(5){
      animation-delay: 0.4s;
    }
    .item:nth-child(6){
      animation-delay: 0.5s;
    }
    .item:nth-child(7){
      animation-delay: 0.6s;
    }
    .item:nth-child(8){
      animation-delay: 0.7s;
    }
    @keyframes loading{
      0%{
        height: 0;
      }
      50%{
        height: 40px;
      }
      100%{
        0
      }
    }
        </style>
      </head>
      <body>
        <div class="loading">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </body>
    </html>
    
    你好,欢迎你来到博客,我是布莱昂。在这里你将看到我关于前端技术和框架的一些理解和体会,并且以后所有博客将在这里发布,由于本人技术水平和认知能力有限,文中难免有认识不足和理解错误的地方,欢迎大家留言指正,我将感激不尽!
  • 相关阅读:
    bat 批处理编写
    dos 命令
    反射
    反爬机制和破解方法汇总
    pandas
    谷歌历史浏览器下载
    python-----pip安装源选择(亲测有效)
    deepin 20.1 系统未安装pip
    python自带库-----os.path
    python 自带库---os库
  • 原文地址:https://www.cnblogs.com/zxa2020/p/12775692.html
Copyright © 2011-2022 走看看