CSS3实现10种Loading效果_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3实现10种Loading效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

PS:如需转载，请注明出处！

第1种效果：

代码如下：

<div class="loading">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span></div>

.loading{            width: 80px;            height: 40px;            margin: 0 auto;            margin-top:100px;        }        .loading span{            display: inline-block;            width: 8px;            height: 100%;            border-radius: 4px;            background: lightgreen;            -webkit-animation: load 1s ease infinite;        }        @-webkit-keyframes load{            0%,100%{                height: 40px;                background: lightgreen;            }            50%{                height: 70px;                margin: -15px 0;                background: lightblue;            }        }        .loading span:nth-child(2){            -webkit-animation-delay:0.2s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.4s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.6s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.8s;        }

第2种效果：

代码如下：

<div class="loading">        <span></span></div>

.loading{            width: 150px;            height: 4px;            border-radius: 2px;            margin: 0 auto;            margin-top:100px;            position: relative;            background: lightgreen;            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;        }        .loading span{            display: inline-block;            width: 16px;            height: 16px;            border-radius: 50%;            background: lightgreen;            position: absolute;            margin-top: -7px;            margin-left:-8px;            -webkit-animation: changePosition 1.04s ease-in infinite alternate;        }        @-webkit-keyframes changeBgColor{            0%{                background: lightgreen;            }            100%{                background: lightblue;            }        }        @-webkit-keyframes changePosition{            0%{                background: lightgreen;            }            100%{                margin-left: 142px;                background: lightblue;            }        }

第3-5种效果：

代码如下：

<div class="loading">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span></div>

第3-5种效果的css样式分别为：

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            margin-top:100px;        }        .loading span{            display: inline-block;            width: 15px;            height: 100%;            margin-right: 5px;            border-radius: 50%;            background: lightgreen;            -webkit-animation: load 1.04s ease infinite;        }        .loading span:last-child{            margin-right: 0px;         }        @-webkit-keyframes load{            0%{                opacity: 1;            }            100%{                opacity: 0;            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            margin-top:100px;        }        .loading span{            display: inline-block;            width: 15px;            height: 100%;            margin-right: 5px;            border-radius: 50%;            background: lightgreen;            -webkit-animation: load 1.04s ease infinite;        }        .loading span:last-child{            margin-right: 0px;         }        @-webkit-keyframes load{            0%{                opacity: 1;                -webkit-transform: scale(1.3);            }            100%{                opacity: 0.2;                -webkit-transform: scale(.3);            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            position: relative;            margin-top:100px;        }        .loading span{            position: absolute;            width: 15px;            height: 100%;            border-radius: 50%;            background: lightgreen;            -webkit-animation: load 1.04s ease-in infinite alternate;        }        @-webkit-keyframes load{            0%{                opacity: 1;                -webkit-transform: translate(0px);            }            100%{                opacity: 0.2;                -webkit-transform: translate(150px);            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

第6-8种效果：

代码如下：

<div class="loading">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span></div>

第6-8种效果的css样式分别为：

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            margin-top:100px;            text-align: center;        }        .loading span{            display: inline-block;            width: 15px;            height: 100%;            margin-right: 5px;            background: lightgreen;            -webkit-animation: load 1.04s ease infinite;        }        .loading span:last-child{            margin-right: 0px;         }        @-webkit-keyframes load{            0%{                opacity: 1;            }            100%{                opacity: 0;            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            margin-top:100px;        }        .loading span{            display: inline-block;            width: 15px;            height: 100%;            margin-right: 5px;            background: lightgreen;            -webkit-transform-origin: right bottom;            -webkit-animation: load 1s ease infinite;        }        .loading span:last-child{            margin-right: 0px;         }        @-webkit-keyframes load{            0%{                opacity: 1;            }            100%{                opacity: 0;                -webkit-transform: rotate(90deg);            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

.loading{            width: 150px;            height: 15px;            margin: 0 auto;            margin-top:100px;        }        .loading span{            display: inline-block;            width: 15px;            height: 100%;            margin-right: 5px;            background: lightgreen;            -webkit-transform-origin: right bottom;            -webkit-animation: load 1s ease infinite;        }        .loading span:last-child{            margin-right: 0px;         }        @-webkit-keyframes load{            0%{                opacity: 1;                -webkit-transform: scale(1);            }            100%{                opacity: 0;                -webkit-transform: rotate(90deg) scale(.3);            }        }        .loading span:nth-child(1){            -webkit-animation-delay:0.13s;        }        .loading span:nth-child(2){            -webkit-animation-delay:0.26s;        }        .loading span:nth-child(3){            -webkit-animation-delay:0.39s;        }        .loading span:nth-child(4){            -webkit-animation-delay:0.52s;        }        .loading span:nth-child(5){            -webkit-animation-delay:0.65s;        }

第9-10种效果：

代码如下：

<div class="loadEffect">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>        <span></span></div>

CSS样式分别为：

.loadEffect{            width: 100px;            height: 100px;            position: relative;            margin: 0 auto;            margin-top:100px;        }        .loadEffect span{            display: inline-block;            width: 16px;            height: 16px;            border-radius: 50%;            background: lightgreen;            position: absolute;            -webkit-animation: load 1.04s ease infinite;        }        @-webkit-keyframes load{            0%{                opacity: 1;            }            100%{                opacity: 0.2;            }        }        .loadEffect span:nth-child(1){            left: 0;            top: 50%;            margin-top:-8px;            -webkit-animation-delay:0.13s;        }        .loadEffect span:nth-child(2){            left: 14px;            top: 14px;            -webkit-animation-delay:0.26s;        }        .loadEffect span:nth-child(3){            left: 50%;            top: 0;            margin-left: -8px;            -webkit-animation-delay:0.39s;        }        .loadEffect span:nth-child(4){            top: 14px;            right:14px;            -webkit-animation-delay:0.52s;        }        .loadEffect span:nth-child(5){            right: 0;            top: 50%;            margin-top:-8px;            -webkit-animation-delay:0.65s;        }        .loadEffect span:nth-child(6){            right: 14px;            bottom:14px;            -webkit-animation-delay:0.78s;        }        .loadEffect span:nth-child(7){            bottom: 0;            left: 50%;            margin-left: -8px;            -webkit-animation-delay:0.91s;        }        .loadEffect span:nth-child(8){            bottom: 14px;            left: 14px;            -webkit-animation-delay:1.04s;        }

.loadEffect{            width: 100px;            height: 100px;            position: relative;            margin: 0 auto;            margin-top:100px;        }        .loadEffect span{            display: inline-block;            width: 20px;            height: 20px;            border-radius: 50%;            background: lightgreen;            position: absolute;            -webkit-animation: load 1.04s ease infinite;        }        @-webkit-keyframes load{            0%{                -webkit-transform: scale(1.2);                opacity: 1;            }            100%{                -webkit-transform: scale(.3);                opacity: 0.5;            }        }        .loadEffect span:nth-child(1){            left: 0;            top: 50%;            margin-top:-10px;            -webkit-animation-delay:0.13s;        }        .loadEffect span:nth-child(2){            left: 14px;            top: 14px;            -webkit-animation-delay:0.26s;        }        .loadEffect span:nth-child(3){            left: 50%;            top: 0;            margin-left: -10px;            -webkit-animation-delay:0.39s;        }        .loadEffect span:nth-child(4){            top: 14px;            right:14px;            -webkit-animation-delay:0.52s;        }        .loadEffect span:nth-child(5){            right: 0;            top: 50%;            margin-top:-10px;            -webkit-animation-delay:0.65s;        }        .loadEffect span:nth-child(6){            right: 14px;            bottom:14px;            -webkit-animation-delay:0.78s;        }        .loadEffect span:nth-child(7){            bottom: 0;            left: 50%;            margin-left: -10px;            -webkit-animation-delay:0.91s;        }        .loadEffect span:nth-child(8){            bottom: 14px;            left: 14px;            -webkit-animation-delay:1.04s;        }

转自：http://www.cnblogs.com/jr1993/p/4622039.html

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。