设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 6 0 - 制作一个加载（Loading）动画 - 0.0
返回列表 发新帖
查看: 4109|回复: 12

[庖丁解牛] 0 0 6 0 - 制作一个加载（Loading）动画 - 0.0

[复制链接]
不二如是
发表于 2017-3-1 14:35:53 | 显示全部楼层 |阅读模式
购买主题 已有 12 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

shishunfu
发表于 2017-5-10 17:17:13 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Loading进度条</title>

  7.         <style type="text/css">
  8.                 body{
  9.                         background-color: #000;
  10.                         margin: 100px;
  11.                 }
  12.                 .load{
  13.                         /*text-indent: -999px;*/
  14.                         font-size: 0;
  15.                         position: relative;
  16.                         width: 202px;
  17.                         height: 202px;
  18.                         box-shadow: inset 0 0 0 12px #6FE;                /*box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！*/
  19.                         border-radius: 50%;
  20.                 }
  21.                 .load::before{
  22.                         position: absolute;
  23.                         content: '';
  24.                         width: 101px;
  25.                         height: 202px;
  26.                         background-color: #000;
  27.                         left: 101px;
  28.                         border-radius: 0 202px 202px 0;
  29.                         animation: loading 2s infinite;
  30.                         transform-origin: 0px 101px;                /*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
  31.                 }
  32.                 .load::after{
  33.                         position: absolute;
  34.                         content: '';
  35.                         width: 202px;
  36.                         height: 202px;
  37.                         border-radius: 50%;
  38.                         left: 0;
  39.                         box-shadow: inset 0 0 0 12px rgba(255,255,255,.3);
  40.                 }
  41.                 @keyframes loading {
  42.                         0% {
  43.                                 transform: rotate(0deg);
  44.                         }
  45.                         100% {
  46.                                 transform: rotate(360deg);
  47.                         }
  48.                 }
  49.                 .load::before{
  50.                         animation: loading 2s infinite;
  51.                 }
  52.                
  53.         </style>
  54. </head>
  55. <body>
  56.         <div class="load">Loading</div>
  57. </body>
  58. </html>
复制代码
0048Loading进度条.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-10 20:46
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

mysoulmq
发表于 2017-3-2 09:45:06 | 显示全部楼层
厉害了~~~~~~~~~~~~~~~~~~~~~~~
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-2 09:46:29 | 显示全部楼层
mysoulmq 发表于 2017-3-2 09:45
厉害了~~~~~~~~~~~~~~~~~~~~~~~

欢迎～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

会魔法的魔法
发表于 2017-4-2 11:19:29 | 显示全部楼层
前台真是太有趣了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

dreamdnj
发表于 2017-4-25 07:55:59 | 显示全部楼层
为啥圆心设置左侧啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-4 08:54:27 | 显示全部楼层
交作业！
060.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-26 14:15:26 | 显示全部楼层
好久没交作业了（抄注释这事儿能算抄么？程序猿的事儿.....）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>进度条</title>
  6.     <style type="text/css">
  7.         body
  8.         {
  9.                 background: #000;
  10.                 margin: 100px;
  11.         }
  12.     .load
  13.         {
  14.         text-indent: -9999px;
  15.         position: relative;
  16.         width: 202px;
  17.         height: 202px;
  18.         box-shadow: inset 0 0 0 16px #6FE;
  19.         border-radius: 50%;
  20.     }
  21.         @keyframes load-effect
  22.         {
  23.                 0%
  24.                 {
  25.                         transform:rotate(0deg);
  26.                 }
  27.                 100%
  28.                 {
  29.                         transform:rotate(360deg);
  30.                 }
  31.         }
  32.         .load::before
  33.         {
  34.                 position:absolute;
  35.                 content:"";
  36.                 width:101px;
  37.                 height:202px;
  38.                 background:#000;
  39.                 left:101px;
  40.                 animation: load-effect 2s infinite;  /*infinite表示动画无限次播放*/
  41.                 transform-origin:0px 101px;  /*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
  42.         }
  43.         .load::after
  44.         {
  45.                 position:absolute;
  46.                 content:"";
  47.                 width:202px;
  48.                 height:202px;
  49.                 border-radius:50%;
  50.                 left:0;
  51.                 box-shadow:inset 0 0 0 16px rgba(255,255,255,.3);
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="load">Loading</div>
  57. </body>
  58. </html>
复制代码

GIF.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

星空·无限
发表于 2019-1-11 11:21:21 | 显示全部楼层
本帖最后由 星空·无限 于 2019-1-11 11:25 编辑

利用相同的原理实现水平进度条的加载，鼠标放进度条上自动加载。不过有个问题还没想好怎么解决，加载完自动跳回底层的灰色了，怎么可以让它保持在加载完成的颜色呢？大神可以指教一下吗 @不二如是

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>进度条</title>
  6.     <style type="text/css">
  7.         .load{
  8.             top: 100px;
  9.             width: 500px;
  10.             height: 10px;
  11.             background: #cccccc;
  12.             position: relative;
  13.             margin: 0 auto;
  14.             text-indent: -9999px;
  15.             border-radius: 10px;
  16.             overflow: hidden;
  17.         }
  18.         .load::before{
  19.             content: '';
  20.             width: 500px;
  21.             height: 10px;
  22.             background: #ff4d69;
  23.             position: absolute;
  24.             border-radius: 10px;
  25.             left: -100%;
  26.         }
  27.         .load:hover::before{
  28.             animation: move 2s;
  29.         }
  30.         @keyframes move{
  31.             from{
  32.                 left: -100%;
  33.             }
  34.             to{
  35.                 left: 0%;
  36.             }
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="load">Loading</div>
  42. </body>
  43. </html>
复制代码
批注.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-6 15:54:07 | 显示全部楼层
加油~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>进度条</title>
  6. <style type="text/css">
  7. /* 清除样式 调整位置 */
  8. * {
  9.         margin:0;
  10.         padding:0;
  11. }
  12. body {
  13.         background:#2ecc71;
  14.         margin:100px;
  15. }
  16. /* 最底层 */
  17. .load {
  18.         position:relative;
  19.         text-indent:-9999px; /*隐藏文字方法之一*/
  20.         width:222px;
  21.         height:222px;
  22.         background: #9b59b6;
  23.         box-shadow:inset 0 0 0 15px #6FE;
  24.         border-radius:50%;
  25. }
  26. /*中间层*/
  27. .load::before {
  28.         content:'';
  29.         width:111px;
  30.         height:111px;
  31.         background:rgba(52, 152, 219);
  32.         position:absolute;
  33.         left:111px;
  34.         border-radius:0 111px 0 0;
  35. }
  36. /*最顶层*/
  37. .load::after {
  38.         content:'';
  39.         position: absolute;
  40.         width:222px;
  41.         height:222px;
  42.         box-shadow: inset 0 0 0 15px rgba(255,255,255,.5);
  43.         left:0;
  44.         border-radius:50%;
  45. }
  46. /* 设定动画 */
  47. @keyframes flash{
  48.         0% {
  49.                 transform: rotate(0deg);
  50.         }
  51.         25% {
  52.                 transform: rotate(90deg);
  53.         }
  54.         50% {
  55.                 transform: rotate(180deg);
  56.         }
  57.         75% {
  58.                 transform: rotate(270deg);
  59.         }
  60.         100% {
  61.                 transform: rotate(360deg);
  62.         }
  63. }
  64. /* 载入动画 并固定动画位置 */
  65. .load::before {
  66.         animation: flash 2.5s infinite linear;
  67.         transform-origin:0px 111px;
  68. }
  69. /* 覆盖样式 实现画面  注释内容，更清晰*/
  70. body {
  71.         background: #000;
  72. }
  73. .load {
  74.         background: none;
  75. }
  76. .load::before {
  77.         background: #000;
  78. }
  79. </style>
  80. </head>
  81. <body>
  82.     <div class="load">Loading</div>
  83. </body>
  84. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-11 11:09:15 | 显示全部楼层
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>进度条</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: #000000;
  9.             margin: 100px;
  10.         }
  11.         .load {
  12.             text-indent: -9999px;
  13.             position: relative;
  14.             width: 202px;
  15.             height: 202px;
  16.             box-shadow: inset 0 0 0 16px #6FE;
  17.             border-radius: 50%;
  18.         }
  19.         .load::before{
  20.             position: absolute;
  21.             content: '';
  22.             width: 101px;
  23.             height: 202px;
  24.             background: #FF88C2;
  25.             left: 101px;
  26.             border-radius: 0 202px 202px 0;
  27.             background: #000;
  28.             animation: load-effect 2s infinite;
  29.             transform-origin: 0px 101px;
  30.         }
  31.         .load::after{
  32.             position: absolute;
  33.             content: '';
  34.             width: 202px;
  35.             height: 202px;
  36.             border-radius: 50%;
  37.             left: 0;
  38.             box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
  39.         }
  40.         @keyframes load-effect {
  41.             0% {
  42.                 transform: rotate(0deg);
  43.             }
  44.             100% {
  45.                 transform: rotate(360deg);
  46.             }
  47.         }
  48.     </style>
  49. </head>
  50. <body>
  51.     <div class="load">Loading</div>
  52. </body>
  53. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-18 15:46:49 | 显示全部楼层

花.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-18 22:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表