常见两种的loading样式（css实现）

来源：互联网发布：怎样挑选淘宝供应商编辑：程序博客网时间：2024/05/20 20:04

第一种圆形loading，效果图如下：
这里写图片描述
实现的原理是利用CSS中的animation属性，无线循环播放动画能够达到旋转效果。具体的html和css实现代码如下

<!DOCTYPE html><html><head>    <title>loading样式1</title>    <style type="text/css">        .loading{            /*固定loading*/            position: fixed;            top: 50%;            left: 50%;            /*垂直水平居中*/            margin: -20px 0 0 -20px;            width: 40px;            height: 40px;            border: 2px solid;            border-color: #333 #333 transparent;            border-radius: 50%;            box-sizing: border-box;            /*动画时间1s，线性变化，无限循环*/            animation: loading 1s linear infinite;        }        @keyframes loading{            0%{                transform: rotate(0deg);            }            100%{                transform: rotate(360deg);            }        }    </style></head><body>    <div class="loading"></div></body></html>

第二种loading的效果图如下所示：
这里写图片描述
实现原理也是利用css中的anmiation属性，具体实现在代码中能很直观的体现，代码如下：

<!DOCTYPE html><html><head>    <title>loading2</title>    <style type="text/css">        .loading{            position: fixed;            top: 50%;            left: 50%;            margin: -6px 0 0 -48px;            /*96=(8+4*2)*6*/            width: 96px;            height: 12px;            overflow: hidden;        }        .loading .bar{            /*176=(8+4*2)*11*/            width:176px;            /* 分成5步的动画来移动进度条 */            animation: loading 1s steps(5,end) both infinite;        }        /*float元素的外边距不会合并*/        .bar i{width: 8px;height: 4px;float: left;margin: 4px;background:#aaa;}        /*设置第六个点高亮，这个点的两边都有5个点*/        .bar i:nth-child(6){transform: scale(1.5);background:#333;}        @keyframes loading{            /*将第六个点移动到第一个点的位置*/            0%{transform: translate(-80px);}            80%,100%{transform: translate(0px);}        }    </style></head><body>    <div class="loading">        <div class="bar">            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>        </div>    </div></body></html>

这两种实现方法是为练习使用，没考虑兼容性问题，但在高版本的浏览器中都能实现效果图，具体的兼容性说明可参考MDN或w3cshool。

0 0