经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
基于CSS3实现的几个小loading效果 _css3_CSS
来源：jb51　　时间：2018/10/8 8:46:46　　对本文有异议

CSS3实现的几个小loading效果

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

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

 

　　　　 这个是效果图片

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

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

  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.         * {
  10.             margin: 0;
  11.             padding: 0
  12.         }
  13.         body {
  14.             background-color: black
  15.         }
  16.         .box {
  17.             margin: 200px auto;
  18.             height: 50px;
  19.             width: 50px;
  20.             border-radius: 10px;
  21.             background-color: rgb(0, 174, 255);
  22.             position: relative;
  23.             overflow: hidden;
  24.             border: 1px solid rgb(0, 174, 255);
  25.             border-top: none;
  26.         }
  27.         .a {
  28.             width: 200px;
  29.             height: 200px;
  30.            background: black;
  31.             position: absolute;
  32.             left: -80px;
  33.             top: -180px;
  34.             border-radius: 80px;
  35.             animation: xuanzhuan 5s linear infinite;
  36.             z-index: 2
  37.         }
  38.         @keyframes xuanzhuan{
  39.             0%{transform: rotate(0deg)}
  40.             100%{transform: rotate(360deg)}
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="box">
  46.         <div class="a"></div>
  47.         <div class="b"></div>
  48.     </div>
  49. </body>
  50. </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.     }
  35.     @keyframes move{
  36.         0%{transform: scale(0.5);opacity: 0.5}
  37.         100%{transform: scale(1);opacity: 1;}
  38.     }
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul>
  43.         <li></li>
  44.         <li></li>
  45.         <li></li>
  46.     </ul>
  47. </body>
  48. </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.         .d1{
  13.             width: 50px;
  14.             height: 50px;
  15.             position: absolute;
  16.             margin: 100px;
  17.         }
  18.         .d1 p{
  19.             width: 14px;
  20.             height: 14px;
  21.             border-radius: 50%;
  22.             background: red;
  23.             position: absolute;
  24.             animation: dong 1.5s linear infinite;
  25.         }
  26.         .d1 p:nth-child(1){
  27.             top: 0;
  28.             left: 0;
  29.         }
  30.         .d1 p:nth-child(2){
  31.             top: 0;
  32.             right: 0;
  33.         }
  34.         .d1 p:nth-child(3){
  35.             right: 0;
  36.             bottom: 0;
  37.         }
  38.         .d1 p:nth-child(4){
  39.             bottom: 0;
  40.             left: 0;
  41.         }
  42.         .d1:nth-of-type(2){
  43.             transform: rotate(45deg);
  44.         }
  45.         @keyframes dong{
  46.             0%{
  47.                 transform: scale(0);
  48.             }
  49.             50%{
  50.                 transform: scale(1);
  51.             }
  52.             100%{
  53.                 transform: scale(0);
  54.             }
  55.         }
  56.         .d1:nth-of-type(1) p:nth-of-type(1){
  57.             /*负值:动画直接开始,但跳过前...秒动画*/
  58.             animation-delay: -0.1s;
  59.         }
  60.         .d1:nth-of-type(2) p:nth-of-type(1){
  61.             animation-delay: -0.3s;
  62.         }
  63.         .d1:nth-of-type(1) p:nth-of-type(2){
  64.             animation-delay: -0.5s;
  65.         }
  66.         .d1:nth-of-type(2) p:nth-of-type(2){
  67.             animation-delay: -0.7s;
  68.         }
  69.         .d1:nth-of-type(1) p:nth-of-type(3){
  70.             animation-delay: -0.9s;
  71.         }
  72.         .d1:nth-of-type(2) p:nth-of-type(3){
  73.             animation-delay: -1.1s;
  74.         }
  75.         .d1:nth-of-type(1) p:nth-of-type(4){
  76.             animation-delay: -1.3s;
  77.         }
  78.         .d1:nth-of-type(2) p:nth-of-type(4){
  79.             animation-delay: -1.5s;
  80.         }
  81.     </style>
  82.     <body>
  83.         <div class="d1">
  84.             <p></p>
  85.             <p></p>
  86.             <p></p>
  87.             <p></p>
  88.         </div>
  89.         <div class="d1">
  90.             <p></p>
  91.             <p></p>
  92.             <p></p>
  93.             <p></p>
  94.         </div>
  95.     </body>
  96. </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. <body>
  8.     <style>
  9.         body {
  10.             background-color: #F5F5F5;
  11.             padding: 100px 120px;
  12.         }
  13.         .box {
  14.             margin-left: 500px;
  15.             display: block;
  16.             width: 64px;
  17.             height: 64px;
  18.             transform-origin: 16px 16px;
  19.             /* 旋转 */
  20.             animation: xuanzhuan 5s infinite;
  21.         }
  22.         /* 平移 */
  23.         .ping {
  24.             animation: pingyi 2.5s infinite;
  25.             position: absolute;
  26.         }
  27.        .hang {
  28.             width: 64px;
  29.             height: 24px;
  30.             position: absolute;
  31.         }
  32.         .hang:nth-child(0) {
  33.             transform: rotate(0deg);
  34.         }
  35.         .hang:nth-child(1) {
  36.             transform: rotate(90deg);
  37.         }
  38.         .hang:nth-child(2) {
  39.             transform: rotate(180deg);
  40.         }
  41.         .hang:nth-child(3) {
  42.             transform: rotate(270deg);
  43.         }
  44.         /* 第一个小珠子 */
  45.        .ping:nth-child(1) {
  46.             width: 8px;
  47.             height: 8px;
  48.             top: 50%;
  49.             left: 50%;
  50.             margin-top: -4px;
  51.             margin-left: -4px;
  52.             border-radius: 4px;
  53.             animation-delay: -0.3s;
  54.         }
  55.         /* 第二个小珠子 */
  56.         .ping:nth-child(2) {
  57.             width: 16px;
  58.             height: 16px;
  59.             top: 50%;
  60.             left: 50%;
  61.             margin-top: -8px;
  62.             margin-left: -8px;
  63.             border-radius: 8px;
  64.             -webkit-animation-delay: -0.6s;
  65.             animation-delay: -0.6s;
  66.         }
  67.          /* 第三个小珠子 */    
  68.         .ping:nth-child(3) {
  69.             width: 24px;
  70.             height: 24px;
  71.             top: 50%;
  72.             left: 50%;
  73.             margin-top: -12px;
  74.             margin-left: -12px;
  75.             border-radius: 12px;
  76.             animation-delay: -0.9s;
  77.         }
  78.         .blue {
  79.             background-color: #1f4e5a;
  80.         }
  81.         .red {
  82.             background-color: #ff5955;
  83.         }
  84.         .yellow {
  85.             background-color: #ffb265;
  86.         }
  87.         .green {
  88.             background-color: #00a691;
  89.         }
  90.         @keyframes xuanzhuan {
  91.             0% { transform: rotate(0deg);}
  92.             100% { transform: rotate(360deg);}
  93.      }
  94.         @keyframes pingyi {
  95.             0% {transform: translateX(0);}
  96.              25% { transform: translateX(-64px); }
  97.             75% { transform: translateX(32px);} 
  98.             100% {transform: translateX(0);}
  99.         }
  100.     </style>
  101.         <div class="box">
  102.             <div class="hang">
  103.                 <div class="ping blue"></div>
  104.                 <div class="ping blue"></div>
  105.                 <div class="ping blue"></div>
  106.             </div>
  107.             <div class="hang">
  108.                 <div class="ping yellow"></div>
  109.                 <div class="ping yellow"></div>
  110.                 <div class="ping yellow"></div>
  111.             </div>
  112.             <div class="hang">
  113.                 <div class="ping red"></div>
  114.                 <div class="ping red"></div>
  115.                 <div class="ping red"></div>
  116.             </div>
  117.             <div class="hang">
  118.                 <div class="ping green"></div>
  119.                 <div class="ping green"></div>
  120.                 <div class="ping green"></div>
  121.             </div>
  122.         </div>
  123. </body>
  124. </html>

   5.圆形正方形切换小loading

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

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

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

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

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

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站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号