首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

基于CSS3实现的几个小loading效果

Posted in HTML / CSS onSeptember 27, 2018

CSS3实现的几个小loading效果

昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家

1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading

基于CSS3实现的几个小loading效果 

这个是效果图片

下面我直接把代码放上来，大家需要的可以直接拉走

               核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        body {
            background-color: black
        }
        .box {
            margin: 200px auto;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: rgb(0, 174, 255);
            position: relative;
            overflow: hidden;
            border: 1px solid rgb(0, 174, 255);
            border-top: none;
        }
        .a {
            width: 200px;
            height: 200px;
           background: black;
            position: absolute;
            left: -80px;
            top: -180px;
            border-radius: 80px;
            animation: xuanzhuan 5s linear infinite;
            z-index: 2
        }
        @keyframes xuanzhuan{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html>　

2.普通的圆形loading    这个也很简单  没啥好说的，直接上代码了

基于CSS3实现的几个小loading效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0}
    li{list-style: none}
    body,html{
        background-color: black;
    }
    ul{
        height: 40px;
        width: 200px;
        margin: 50px auto;
    }
    ul>li{
        float: left;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: white;
        margin-left: 10px;
        animation: move 2s infinite alternate;
        transform: scale(0.5)
    }
    ul>li:nth-of-type(2){
        animation-delay: 0.5s;
    }
    ul>li:nth-of-type(3){
        animation-delay:1s;
    }
    @keyframes move{
        0%{transform: scale(0.5);opacity: 0.5}
        100%{transform: scale(1);opacity: 1;}
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

3.圆形转圈loading

思想（把小圆用定位排成圆形，再给每个上添加动画，用delay控制延迟事件即可）

基于CSS3实现的几个小loading效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .d1{
            width: 50px;
            height: 50px;
            position: absolute;
            margin: 100px;
        }
        .d1 p{
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: red;
            position: absolute;
            animation: dong 1.5s linear infinite;
        }
        .d1 p:nth-child(1){
            top: 0;
            left: 0;
        }
        .d1 p:nth-child(2){
            top: 0;
            right: 0;
        }
        .d1 p:nth-child(3){
            right: 0;
            bottom: 0;
        }
        .d1 p:nth-child(4){
            bottom: 0;
            left: 0;
        }
        .d1:nth-of-type(2){
            transform: rotate(45deg);
        }
        @keyframes dong{
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1);
            }
            100%{
                transform: scale(0);
            }
        }
        .d1:nth-of-type(1) p:nth-of-type(1){
            /*负值:动画直接开始,但跳过前...秒动画*/
            animation-delay: -0.1s;
        }
        .d1:nth-of-type(2) p:nth-of-type(1){
            animation-delay: -0.3s;
        }
        .d1:nth-of-type(1) p:nth-of-type(2){
            animation-delay: -0.5s;
        }
        .d1:nth-of-type(2) p:nth-of-type(2){
            animation-delay: -0.7s;
        }
        .d1:nth-of-type(1) p:nth-of-type(3){
            animation-delay: -0.9s;
        }
        .d1:nth-of-type(2) p:nth-of-type(3){
            animation-delay: -1.1s;
        }
        .d1:nth-of-type(1) p:nth-of-type(4){
            animation-delay: -1.3s;
        }
        .d1:nth-of-type(2) p:nth-of-type(4){
            animation-delay: -1.5s;
        }
    </style>
    <body>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="d1">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>

 

4.交叉效果

这个稍微复杂一点，其实只要捋明白思路，也挺简单的（PS：大家可以把动画挨个取消试试，你就会发现好像并不是很难）

基于CSS3实现的几个小loading效果

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
</head>
<body>
    <style>
        body {
            background-color: #F5F5F5;
            padding: 100px 120px;
        }
        .box {
            margin-left: 500px;
            display: block;
            width: 64px;
            height: 64px;
            transform-origin: 16px 16px;
            /* 旋转 */
            animation: xuanzhuan 5s infinite;
        }
        /* 平移 */
        .ping {
            animation: pingyi 2.5s infinite;
            position: absolute;
        }
       .hang {
            width: 64px;
            height: 24px;
            position: absolute;
        }
        .hang:nth-child(0) {
            transform: rotate(0deg);
        }
        .hang:nth-child(1) {
            transform: rotate(90deg);
        }
        .hang:nth-child(2) {
            transform: rotate(180deg);
        }
        .hang:nth-child(3) {
            transform: rotate(270deg);
        }
        /* 第一个小珠子 */
       .ping:nth-child(1) {
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            margin-top: -4px;
            margin-left: -4px;
            border-radius: 4px;
            animation-delay: -0.3s;
        }
        /* 第二个小珠子 */
        .ping:nth-child(2) {
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            border-radius: 8px;
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
         /* 第三个小珠子 */    
        .ping:nth-child(3) {
            width: 24px;
            height: 24px;
            top: 50%;
            left: 50%;
            margin-top: -12px;
            margin-left: -12px;
            border-radius: 12px;
            animation-delay: -0.9s;
        }
        .blue {
            background-color: #1f4e5a;
        }
        .red {
            background-color: #ff5955;
        }
        .yellow {
            background-color: #ffb265;
        }
        .green {
            background-color: #00a691;
        }
        @keyframes xuanzhuan {
            0% { transform: rotate(0deg);}
            100% { transform: rotate(360deg);}
     }
        @keyframes pingyi {
            0% {transform: translateX(0);}
             25% { transform: translateX(-64px); }
            75% { transform: translateX(32px);} 
            100% {transform: translateX(0);}
        }
    </style>
        <div class="box">
            <div class="hang">
                <div class="ping blue"></div>
                <div class="ping blue"></div>
                <div class="ping blue"></div>
            </div>
            <div class="hang">
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
            </div>
            <div class="hang">
                <div class="ping red"></div>
                <div class="ping red"></div>
                <div class="ping red"></div>
            </div>
            <div class="hang">
                <div class="ping green"></div>
                <div class="ping green"></div>
                <div class="ping green"></div>
            </div>
        </div>
</body>
</html>

   5.圆形正方形切换小loading

基于CSS3实现的几个小loading效果

这个是真的简单！！！！！

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
<title>loading-04</title>
</head>
<body>
<style>
    body{ 
        padding: 80px 100px;
    }
    .csshub-loading-icon{
        padding:10px;
        width:10px;
        height:10px;
        border-top:20px solid #ED5548; 
        border-right:20px solid #599CD3;
        border-bottom: 20px solid #5CBD5E;
        border-left:20px solid #FDD901;
        background:transparent;
        animation: csshub-rotate-right-round 1.2s ease-in-out infinite  alternate ;
    }
    @keyframes csshub-rotate-right-round
        {
        0% { transform: rotate(0deg);}
        50% {transform: rotate(180deg); }
        100% {transform: rotate(360deg);border-radius:50%;}
    }
</style>
    <div class="csshub-loading-icon"></div>
</body>
</html>

我没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦！
 

以上所述是小编给大家介绍的CSS3实现的几个小loading效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

基于CSS3实现的几个小loading效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
详解css3 mask遮罩实现一些特效
Oct 24 #HTML / CSS
css3绘制百度的小度熊
Oct 29 #HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 #HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 #HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 #HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 #HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 #HTML / CSS
横向滚动(1) NginxConfig(1) SVN(1) Master(1) Slave(1) 共享文件夹(1) 骨架屏(1) caddy(1) ESXI(1) 表约束(2)
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php实现的漂亮分页方法
2014/04/17 PHP
Laravel框架学习笔记（二）项目实战之模型（Models）
2014/10/15 PHP
PHP制作万年历
2015/01/07 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
限制文本字节数js代码
2007/03/06 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
Vue.js第三天学习笔记（计算属性computed）
2016/12/01 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
详解webpack babel的配置
2018/01/09 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python中from module import * 的一个坑
2014/07/20 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
全球性的在线购物网站：Zapals
2017/03/22 全球购物
美国女性卫生用品公司：Thinx
2017/06/30 全球购物
2015年公司国庆放假通知
2015/07/30 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
Win11如何设置右键单击显示所有选项？Win11右键单击显示所有选项设置教程
2022/04/08 数码科技