好看的loading animation

向右看齐 2022-09-02 15:55 137阅读 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);
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关 java好看的界面

Java拥有丰富的图形用户界面(GUI)工具包, 其中最常用的是Swing和JavaFX. Swing是Java的标准GUI工具包, 提供了许多可视化组件和布局管理器. Jav

超、凢脫俗/ 2024年03月25日 19:47/ 0 赞/ 82 阅读

相关好看的菜单按钮

[https://jonsuh.com/hamburgers/\usage][https_jonsuh.com_hamburgers_usage] [https_jonsu

深藏阁楼爱情的钟/ 2023年01月11日 01:10/ 0 赞/ 122 阅读

相关好看的表格样式

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

傷城~/ 2022年12月30日 08:26/ 0 赞/ 216 阅读

相关好看的网页Loading——EpicSpinners

EpicSpinners是一组易于使用的纯css打造的网页Loading效果，并且同时整合了Vue组件可以方便的在Vue项目中进行使用，由于是纯css打造，你可以在任意网页项目

心已赠人/ 2022年11月07日 01:44/ 0 赞/ 188 阅读

相关【好看的按钮效果】

原文链接：[https://www.jq22.com/code948][https_www.jq22.com_code948] <div class="buttons

曾经终败给现在/ 2022年09月04日 08:59/ 0 赞/ 178 阅读

相关好看的loading animation

好看的loading animation \[HTML+CSS\]5分钟实现惊人的加载动画效果！！！\前端 html代码 <!DOCTYPE html>

向右看齐/ 2022年09月02日 15:55/ 0 赞/ 138 阅读

相关 Animation & Property Animation 使用

本篇主要讲Animation 和 Property Animation的使用，最后会讲QQ管家桌面火箭作为例子： ![Center][] 在Android中开发动效有两

短命女/ 2022年07月24日 07:29/ 0 赞/ 171 阅读

相关 CSS content换行技术实现字符animation loading效果

by [zhangxinxu][] from [http://www.zhangxinxu.com/wordpress/?p=5753][http_www.zhangxinx

深藏阁楼爱情的钟/ 2022年06月16日 02:59/ 0 赞/ 470 阅读

相关好看的按钮集合HTML + CSS各种好看按钮组件

展示效果 \[注意:\]并不是单纯的效果，而是有动画的 ![展示的效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

深藏阁楼爱情的钟/ 2021年09月21日 22:08/ 1 赞/ 1330 阅读

相关好看的图片接口

超级好看的图片接口每次写文章给博文配图是一件很麻烦的事情，一张张地找，有时候质量还不好，于是乎，我就去寻找了一波背景图api接口，这下妈妈再也不用担心我文章不会配图了，

秒速五厘米/ 2021年09月04日 07:22/ 0 赞/ 393 阅读