贴出来的代码比较多,大家可以去" />
您的位置:首页 > Web前端 > > 正文

css3loading教程(详解纯CSS3制作的20种loading动效)

更多 时间:2022-01-23 02:02:05 类别:Web前端 浏览量:1776

css3loading教程

详解纯CSS3制作的20种loading动效

一些网站或者app在加载新东西的时候,往往会有一些好看有趣的loading图,大部分的loading样式都可以使用css3写出来,不仅比直接使.jpg" alt="css3loading教程(详解纯CSS3制作的20种loading动效)" border="0" />

贴出来的代码比较多,大家可以去我的GItHub下载查看源码

效果图为:

css3loading教程(详解纯CSS3制作的20种loading动效)

css3loading教程(详解纯CSS3制作的20种loading动效)

css3loading教程(详解纯CSS3制作的20种loading动效)

以下为对应的html代码:

  • <!doctype html>
    <head>
    <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="demo.css"/>
        <link rel="stylesheet" type="text/css" href="loaders.css"/>
        <title>css3炫酷页面加载动画特效代码 </title>
    </head>
    <body>
      <main>
        <li class="loaders">
          <li class="loader">
            <li class="loader-inner ball-pulse">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-grid-pulse">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-clip-rotate">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-clip-rotate-pulse">
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner square-spin">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-clip-rotate-multiple">
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-pulse-rise">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-rotate">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner cube-transition">
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-zig-zag">
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-zig-zag-deflect">
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-triangle-path">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-scale">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner line-scale">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner line-scale-party">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-scale-multiple">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-pulse-sync">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-beat">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner line-scale-pulse-out">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner line-scale-pulse-out-rapid">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-scale-ripple">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-scale-ripple-multiple">
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-spin-fade-loader">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner line-spin-fade-loader">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner triangle-skew-spin">
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner pacman">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner ball-grid-beat">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </li>
          </li>
          <li class="loader">
            <li class="loader-inner semi-circle-spin">
              <li></li>
            </li>
          </li>
        </li>
      </main>
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          document.querySelector('main').className += 'loaded';
        });
      </script>
    
    
    </body>
    </html>
    
    
  • css3代码有点长,都写在一块了,就不贴出来了,详情去github查看

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:loading CSS3