文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

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

php中文网
发布： 2016-06-24 11:41:43
原创
1048人浏览过

昨晚用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

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：纯css实现苹果表盘动画_html/css_WEB-ITnose 下一篇：CSS3制作苹果手机的Message图标，超强大_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
怎样在HTML中实现瀑布流布局 实现瀑布流布局需要HTML、CSS和JavaScript。1.HTML使用包裹内容。2.CSS设置多列布局。3.JavaScript动态调整项目位置，添加到最短列中，并可使用Masonry.js或Isotope.js优化性能。
2025-06-12 22:15:01
445
html中如何添加背景音乐？背景音乐设置教程 要在网页中实现背景音乐自动播放，可使用HTML5的标签，并通过设置autoplay和loop属性实现自动循环播放。但需注意浏览器限制及用户体验问题。具体方法如下：1.使用标签嵌入音频并设置autoplayloop；2.为避免浏览器阻止自动播放，可先静音播放并通过按钮解除静音；3.提供多种音频格式提升兼容性；4.建议提供声音开关控制以提升用户体验。尽管实现简单，但应谨慎使用背景音乐，尤其在信息类或正式网站中更应以用户为中心考虑是否启用该功能。
2025-06-12 22:03:01
584
HTML属性怎么用？标签属性设置规范与实例解析 HTML属性以属性名="属性值"的形式写在开始标签中，用于提供元素的额外信息并修改其行为或外观。1.属性名不区分大小写，但建议使用小写以提高可读性。2.属性值通常用双引号括起，若无空格或特殊字符也可省略。3.常见属性包括id、class、style、src、href、alt、title、width、height、disabled和required等，分别用于标识元素、应用样式、指定资源路径、提供替代文本、显示提示信息、控制尺寸、禁用表单元素及标记必填项。4.命名规范要求使用小写属性名，属性值建议
2025-06-12 21:42:01
685
html中如何插入表单？表单制作步骤详解 在HTML中插入表单的方法包括：1.使用标签定义表单结构并设置action和method属性；2.添加文本框、密码框、单选按钮、复选框、下拉选择框及提交按钮等控件；3.通过name属性确保数据提交，并根据需求设置enctype属性及提交方式；4.利用HTML5验证属性或JavaScript进行表单验证，以保证输入数据的正确性。
2025-06-12 21:27:01
321
html中如何设置列表样式？列表美化方法详解 在HTML中设置列表样式主要通过CSS实现，具体步骤包括：1.去除默认样式以统一基础风格；2.使用list-style调整项目符号类型、位置及图片；3.通过伪元素自定义更丰富的装饰样式；4.保持结构与样式的分离以便维护。掌握这些方法后，可以有效提升列表的美观性与用户体验。
2025-06-12 21:03:01
412
html中href的用法 超链接href的5种参数写法 href属性有五种参数写法：1.绝对URL，适用于外部网站链接；2.相对URL，适用于同一网站内链接；3.锚点链接，用于页面内导航；4.邮件链接，直接发送电子邮件；5.电话链接，适用于移动设备拨号。
2025-06-12 20:39:01
109
怎样在HTML里创建响应式网格布局 要在HTML中创建响应式网格布局，应使用CSSGrid或Flexbox。1)使用CSSGrid创建网格容器并定义列的自动填充和最小最大宽度。2)通过媒体查询调整小屏幕布局。3)注意浏览器兼容性和CSS复杂性，逐步增加布局复杂性，并使用预处理器管理CSS。
2025-06-12 20:03:01
800
html中如何首行空两格 段落首行缩进的4种实现方案 在HTML中实现段落首行空两格可以使用四种方法：1.CSS的text-indent属性（p{text-indent:2em;}），简洁通用但只影响首行；2.HTML的非断行空格（  内容），无需CSS但代码冗长；3.CSS的padding-left属性（p{padding-left:2em;}），可控制整个段落但可能影响布局；4.CSS的:first-line伪元素（p:first-line{text-indent:2em;}），精确但兼容性较差。
2025-06-12 19:39:01
329
html中文字居中的标签 居中标签center的替代方案 在HTML中，替代标签的方法有三种：1.使用CSS的text-align属性实现水平居中；2.结合line-height属性实现单行文字的垂直和水平居中；3.使用flexbox或grid布局实现多行文字的垂直和水平居中，这些方法更灵活且符合现代网页开发标准。
2025-06-12 19:27:01
453
html中hover怎么用 css悬停效果的4种实现方式 在HTML中使用CSS悬停效果可以通过:hover伪类实现。1.基本颜色变化：通过改变元素颜色，适用于按钮和链接。2.动画过渡效果：使用transition属性实现平滑过渡，提升用户体验。3.阴影效果：通过box-shadow属性添加阴影，增强元素立体感。4.复杂动画效果：使用@keyframes和animation属性实现复杂动画，如旋转和缩放。
2025-06-12 18:39:01
984
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部