loaders.css实现28款不同的loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:loaders.css实现28款不同的loading加载动画效果代码

代码标签: loaders.css loading 加载 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /**
         *
         *
         */
        html, body {
          padding: 0;
          margin: 0;
          height: 100%;
          font-size: 16px;
          background: #ed5565;
          color: #fff;
          font-family: 'Source Sans Pro'; }
        
        h1 {
          font-size: 2.8em;
          font-weight: 700;
          letter-spacing: -1px;
          margin: 0.6rem 0; }
          h1 > span {
            font-weight: 300; }
        
        h2 {
          font-size: 1.15em;
          font-weight: 300;
          margin: 0.3rem 0; }
        
        main {
          width: 95%;
          max-width: 1000px;
          margin: 4em auto;
          opacity: 0; }
          main.loaded {
            transition: opacity .25s linear;
            opacity: 1; }
          main header {
            width: 100%; }
            main header > div {
              width: 50%; }
            main header > .left, main header > .right {
              height: 100%; }
          main .loaders {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: row;
            flex-wrap: wrap; }
            main .loaders .loader {
              box-sizing: border-box;
              display: flex;
              flex: 0 1 auto;
              flex-direction: column;
              fle.........完整代码请登录后点击上方下载按钮下载查看

网友评论0