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

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

　　　　 这个是效果图片

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin:;
  12.             padding: 0
  13.         }
  14.         body {
  15.             background-color: black
  16.         }
  17.         .box {
  18.             margin: 200px auto;
  19.             height: 50px;
  20.             width: 50px;
  21.             border-radius: 10px;
  22.             background-color: rgb(0, 174, 255);
  23.             position: relative;
  24.             overflow: hidden;
  25.             border: 1px solid rgb(0, 174, 255);
  26.             border-top: none;
  27.         }
  28.         .a {
  29.             width: 200px;
  30.             height: 200px;
  31.            background: black;
  32.             position: absolute;
  33.             left: -80px;
  34.             top: -180px;
  35.             border-radius: 80px;
  36.             animation: xuanzhuan 5s linear infinite;
  37.             z-index: 2
  38.         }
  39.         @keyframes xuanzhuan{
  40.             0%{transform: rotate(0deg)}
  41.             100%{transform: rotate(360deg)}
  42.         }
  43.  
  44.     </style>
  45. </head>
  46.  
  47. <body>
  48.     <div class="box">
  49.         <div class="a"></div>
  50.         <div class="b"></div>
  51.     </div>
  52. </body>
  53.  
  54. </html>

　　

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

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.     *{margin:;padding:}
  10.     li{list-style: none}
  11.     body,html{
  12.         background-color: black;
  13.     }
  14.     ul{
  15.         height: 40px;
  16.         width: 200px;
  17.         margin: 50px auto;
  18.     }
  19.     ul>li{
  20.         float: left;
  21.         height: 20px;
  22.         width: 20px;
  23.         border-radius: 50%;
  24.         background: white;
  25.         margin-left: 10px;
  26.         animation: move 2s infinite alternate;
  27.         transform: scale(0.5)
  28.     }
  29.     ul>li:nth-of-type(2){
  30.         animation-delay: 0.5s;
  31.     }
  32.     ul>li:nth-of-type(3){
  33.         animation-delay:1s;
  34.     }
  35.  
  36.     @keyframes move{
  37.         0%{transform: scale(0.5);opacity: 0.5}
  38.         100%{transform: scale(1);opacity:;}
  39.     }
  40.     </style>
  41. </head>
  42. <body>
  43.     <ul>
  44.         <li></li>
  45.         <li></li>
  46.         <li></li>
  47.     </ul>
  48.  
  49. </body>
  50. </html>

　　3.圆形转圈loading

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

　　

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.     </head>
  7.     <style>
  8.         *{
  9.             margin:;
  10.             padding:;
  11.  
  12.         }
  13.         .d1{
  14.             width: 50px;
  15.             height: 50px;
  16.             position: absolute;
  17.             margin: 100px;
  18.         }
  19.         .d1 p{
  20.             width: 14px;
  21.             height: 14px;
  22.             border-radius: 50%;
  23.             background: red;
  24.             position: absolute;
  25.             animation: dong 1.5s linear infinite;
  26.         }
  27.         .d1 p:nth-child(1){
  28.             top:;
  29.             left:;
  30.  
  31.         }
  32.         .d1 p:nth-child(2){
  33.             top:;
  34.             right:;
  35.  
  36.         }
  37.         .d1 p:nth-child(3){
  38.             right:;
  39.             bottom:;
  40.  
  41.         }
  42.         .d1 p:nth-child(4){
  43.             bottom:;
  44.             left:;
  45.         }
  46.         .d1:nth-of-type(2){
  47.             transform: rotate(45deg);
  48.         }
  49.         @keyframes dong{
  50.             0%{
  51.                 transform: scale(0);
  52.             }
  53.             50%{
  54.                 transform: scale(1);
  55.             }
  56.             100%{
  57.                 transform: scale(0);
  58.             }
  59.         }
  60.         .d1:nth-of-type(1) p:nth-of-type(1){
  61.             /*负值:动画直接开始,但跳过前...秒动画*/
  62.             animation-delay: -0.1s;
  63.         }
  64.         .d1:nth-of-type(2) p:nth-of-type(1){
  65.             animation-delay: -0.3s;
  66.         }
  67.         .d1:nth-of-type(1) p:nth-of-type(2){
  68.             animation-delay: -0.5s;
  69.         }
  70.         .d1:nth-of-type(2) p:nth-of-type(2){
  71.             animation-delay: -0.7s;
  72.         }
  73.         .d1:nth-of-type(1) p:nth-of-type(3){
  74.             animation-delay: -0.9s;
  75.         }
  76.         .d1:nth-of-type(2) p:nth-of-type(3){
  77.             animation-delay: -1.1s;
  78.         }
  79.         .d1:nth-of-type(1) p:nth-of-type(4){
  80.             animation-delay: -1.3s;
  81.         }
  82.         .d1:nth-of-type(2) p:nth-of-type(4){
  83.             animation-delay: -1.5s;
  84.         }
  85.     </style>
  86.     <body>
  87.         <div class="d1">
  88.             <p></p>
  89.             <p></p>
  90.             <p></p>
  91.             <p></p>
  92.         </div>
  93.         <div class="d1">
  94.             <p></p>
  95.             <p></p>
  96.             <p></p>
  97.             <p></p>
  98.         </div>
  99.     </body>
  100. </html>

　　4.交叉效果

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

　　　　

　　　　

  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="renderer" content="webkit">
  6. </head>
  7.  
  8. <body>
  9.  
  10.     <style>
  11.         body {
  12.             background-color: #F5F5F5;
  13.             padding: 100px 120px;
  14.         }
  15.  
  16.         .box {
  17.             margin-left: 500px;
  18.             display: block;
  19.             width: 64px;
  20.             height: 64px;
  21.             transform-origin: 16px 16px;
  22.             /* 旋转 */
  23.             animation: xuanzhuan 5s infinite;
  24.         }
  25.         /* 平移 */
  26.         .ping {
  27.             animation: pingyi 2.5s infinite;
  28.             position: absolute;
  29.         }
  30.        .hang {
  31.             width: 64px;
  32.             height: 24px;
  33.             position: absolute;
  34.         }
  35.         .hang:nth-child(0) {
  36.             transform: rotate(0deg);
  37.         }
  38.         .hang:nth-child(1) {
  39.             transform: rotate(90deg);
  40.         }
  41.         .hang:nth-child(2) {
  42.             transform: rotate(180deg);
  43.         }
  44.         .hang:nth-child(3) {
  45.             transform: rotate(270deg);
  46.         }
  47.         /* 第一个小珠子 */
  48.        .ping:nth-child(1) {
  49.             width: 8px;
  50.             height: 8px;
  51.             top: 50%;
  52.             left: 50%;
  53.             margin-top: -4px;
  54.             margin-left: -4px;
  55.             border-radius: 4px;
  56.             animation-delay: -0.3s;
  57.         }
  58.         /* 第二个小珠子 */
  59.         .ping:nth-child(2) {
  60.             width: 16px;
  61.             height: 16px;
  62.             top: 50%;
  63.             left: 50%;
  64.             margin-top: -8px;
  65.             margin-left: -8px;
  66.             border-radius: 8px;
  67.             -webkit-animation-delay: -0.6s;
  68.             animation-delay: -0.6s;
  69.         }
  70.          /* 第三个小珠子 */
  71.         .ping:nth-child(3) {
  72.             width: 24px;
  73.             height: 24px;
  74.             top: 50%;
  75.             left: 50%;
  76.             margin-top: -12px;
  77.             margin-left: -12px;
  78.             border-radius: 12px;
  79.             animation-delay: -0.9s;
  80.         }
  81.  
  82.         .blue {
  83.             background-color: #1f4e5a;
  84.         }
  85.         .red {
  86.             background-color: #ff5955;
  87.         }
  88.         .yellow {
  89.             background-color: #ffb265;
  90.         }
  91.         .green {
  92.             background-color: #00a691;
  93.         }
  94.         @keyframes xuanzhuan {
  95.             0% { transform: rotate(0deg);}
  96.             100% { transform: rotate(360deg);}
  97.      }
  98.         @keyframes pingyi {
  99.             0% {transform: translateX(0);}
  100.              25% { transform: translateX(-64px); }
  101.             75% { transform: translateX(32px);}
  102.             100% {transform: translateX(0);}
  103.         }
  104.     </style>
  105.  
  106.         <div class="box">
  107.             <div class="hang">
  108.                 <div class="ping blue"></div>
  109.                 <div class="ping blue"></div>
  110.                 <div class="ping blue"></div>
  111.             </div>
  112.  
  113.             <div class="hang">
  114.                 <div class="ping yellow"></div>
  115.                 <div class="ping yellow"></div>
  116.                 <div class="ping yellow"></div>
  117.             </div>
  118.             <div class="hang">
  119.                 <div class="ping red"></div>
  120.                 <div class="ping red"></div>
  121.                 <div class="ping red"></div>
  122.             </div>
  123.             <div class="hang">
  124.                 <div class="ping green"></div>
  125.                 <div class="ping green"></div>
  126.                 <div class="ping green"></div>
  127.             </div>
  128.         </div>
  129.  
  130. </body>
  131.  
  132. </html>

5.圆形正方形切换小loading

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

　　

  1. <!doctype html>
  2.  
  3. <html lang="zh-cn">
  4.  
  5. <head>
  6.  
  7. <meta charset="UTF-8">
  8.  
  9. <meta name="renderer" content="webkit">
  10.  
  11. <link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
  12.  
  13. <title>loading-04</title>
  14.  
  15. </head>
  16.  
  17. <body>
  18.  
  19. <style>
  20.  
  21.     body{
  22.         padding: 80px 100px;
  23.     }
  24.     .csshub-loading-icon{
  25.         padding:10px;
  26.         width:10px;
  27.         height:10px;
  28.         border-top:20px solid #ED5548;
  29.         border-right:20px solid #599CD3;
  30.         border-bottom: 20px solid #5CBD5E;
  31.         border-left:20px solid #FDD901;
  32.         background:transparent;
  33.         animation: csshub-rotate-right-round 1.2s ease-in-out infinite  alternate ;
  34.     }
  35.  
  36.     @keyframes csshub-rotate-right-round
  37.  
  38.         {
  39.  
  40.         0% { transform: rotate(0deg);}
  41.  
  42.         50% {transform: rotate(180deg); }
  43.  
  44.         100% {transform: rotate(360deg);border-radius:50%;}
  45.  
  46.     }
  47.  
  48. </style>
  49.  
  50.     <div class="csshub-loading-icon"></div>
  51.  
  52. </body>
  53.  
  54. </html>

好啦，今天先分享这些，以后再有loading我会再补充上来的，嗷，对了，我懒得没做兼容，要是再某些浏览器不能运行，加一下浏览器前缀就好啦

　　　　

CSS3实现的几个小loading效果的更多相关文章

  1. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  2. CSS3+HTML5特效7 - 特殊的 Loading 效果

    效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...

  3. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

  4. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  5. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  6. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  7. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  8. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  9. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

随机推荐

  1. 反向读取Mysql数据库表结构到PowerDesigner中

    使用PowerDesigner挺长时间了,只是一些简单的表结构设计,因需要对当前数据库进行再设计,需要看一下数据库中所有的表,及表之间的关系,并重新修改表结构,因此需求就是怎么把数据库中的表结构反向生 ...

  2. django-子项目

    当我们开始做一个项目的时候 ,当我们做的项目越来越大的时候py文件已经不足以分担 并且看起来不清晰   所以我们需要 新建一个子项目   这样的话可以方便管理 我们要建立子项目的话先进入那个项目的文件 ...

  3. [LeetCode]无重复字符的最长子串

    给定一个字符串,找出不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 无重复字符的最长子串是 "abc",其长度为 ...

  4. dubbo源码阅读之SPI

    dubbo SPI SPI,全程Service Provider interface, java中的一种借口扩展机制,将借口的实现类注明在配置文件中,程序在运行时通过扫描这些配置文件从而获取全部的实现 ...

  5. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  6. Struts2+AJAX+JQuery 实现用户登入与注册功能。

    要求 必备知识 JAVA/Struts2,JS/JQuery,HTML/CSS基础语法. 开发环境 MyEclipse 10 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 关于U ...

  7. tomcat 虚拟目录

    在webapps同级目录 下建立一个webapps_abc的目录,将网站根目录abc文件夹放入webapps_abc目录下: 找到conf目录下的,server.xml文件,在service节点下添加 ...

  8. Golang 并发concurrency

    并发concurrency 很多人都是冲着Go大肆宣扬的高并发而忍不住跃跃欲试,但其实从源码解析来看,goroutine只是由官方实现的超级"线程池"而已.不过话说回来,每个实例4 ...

  9. http缓存详解，http缓存推荐方案

    前言 通过本文,你将了解到http缓存机制是怎样的,no-cache到底有没有缓存,地址栏回车,F5,ctrl+F5的区别,以及当下较为推荐的缓存方案等. 自从和前端组的同事一起整了个前端扫盲计划,想 ...

  10. Deep learning with Python 学习笔记（6）

    本节介绍循环神经网络及其优化 循环神经网络(RNN,recurrent neural network)处理序列的方式是,遍历所有序列元素,并保存一个状态(state),其中包含与已查看内容相关的信息. ...