经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » HTML5 » 查看文章
CSS3实现的几个小loading效果
来源：cnblogs　　作者：一只菜鸟攻城狮啊　　时间：2018/9/27 16:41:57　　对本文有异议

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

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

　　　　 这个是效果图片

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

 

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

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  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: 0;
  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.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="box">
  49.         <div class="a"></div>
  50.         <div class="b"></div>
  51.     </div>
  52. </body>
  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: 0;padding: 0}
  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.     }
  36.     @keyframes move{
  37.         0%{transform: scale(0.5);opacity: 0.5}
  38.         100%{transform: scale(1);opacity: 1;}
  39.     }
  40.     </style>
  41. </head>
  42. <body>
  43.     <ul>
  44.         <li></li>
  45.         <li></li>
  46.         <li></li>
  47.     </ul>
  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: 0;
  10.             padding: 0;
  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: 0;
  29.             left: 0;
  30.             
  31.         }
  32.         .d1 p:nth-child(2){
  33.             top: 0;
  34.             right: 0;
  35.             
  36.         }
  37.         .d1 p:nth-child(3){
  38.             right: 0;
  39.             bottom: 0;
  40.             
  41.         }
  42.         .d1 p:nth-child(4){
  43.             bottom: 0;
  44.             left: 0;
  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>
  8. <body>
  10.     <style>
  11.         body {
  12.             background-color: #F5F5F5;
  13.             padding: 100px 120px;
  14.         }
  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.         }
  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>
  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>
  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>
  130. </body>
  132. </html>

    5.圆形正方形切换小loading

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

　　

  1. <!doctype html>
  3. <html lang="zh-cn">
  5. <head>
  7. <meta charset="UTF-8">
  9. <meta name="renderer" content="webkit">
  11. <link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
  13. <title>loading-04</title>
  15. </head>
  17. <body>
  19. <style>
  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.     }
  36.     @keyframes csshub-rotate-right-round
  38.         {
  40.         0% { transform: rotate(0deg);}
  42.         50% {transform: rotate(180deg); }
  44.         100% {transform: rotate(360deg);border-radius:50%;}
  46.     }
  48. </style>
  50.     <div class="csshub-loading-icon"></div>
  52. </body>
  54. </html>

 

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

　　　　

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号