0 0 6 0 - 制作一个加载（Loading）动画 - 0.0,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-3-1 14:35:53

已有 12 人购买本主题需向作者支付 2 鱼币 才能浏览购买主题

shishunfu 发表于 2017-5-10 17:17:13

交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading进度条</title>

<style type="text/css">
body{
background-color: #000;
margin: 100px;
}
.load{
/*text-indent: -999px;*/
font-size: 0;
position: relative;
width: 202px;
height: 202px;
box-shadow: inset 0 0 0 12px #6FE; /*box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！*/
border-radius: 50%;
}
.load::before{
position: absolute;
content: '';
width: 101px;
height: 202px;
background-color: #000;
left: 101px;
border-radius: 0 202px 202px 0;
animation: loading 2s infinite;
transform-origin: 0px 101px; /*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
}
.load::after{
position: absolute;
content: '';
width: 202px;
height: 202px;
border-radius: 50%;
left: 0;
box-shadow: inset 0 0 0 12px rgba(255,255,255,.3);
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load::before{
animation: loading 2s infinite;
}

</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

mysoulmq 发表于 2017-3-2 09:45:06

厉害了~~~~~~~~~~~~~~~~~~~~~~~

不二如是 发表于 2017-3-2 09:46:29

mysoulmq 发表于 2017-3-2 09:45
厉害了~~~~~~~~~~~~~~~~~~~~~~~

欢迎～

会魔法的魔法 发表于 2017-4-2 11:19:29

前台真是太有趣了

dreamdnj 发表于 2017-4-25 07:55:59

为啥圆心设置左侧啊

aswyamato1989 发表于 2017-8-4 08:54:27

交作业！

STmove 发表于 2018-7-26 14:15:26

好久没交作业了（抄注释这事儿能算抄么？程序猿的事儿.....）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
body
{
background: #000;
margin: 100px;
}
.load
{
   text-indent: -9999px;
   position: relative;
   width: 202px;
   height: 202px;
   box-shadow: inset 0 0 0 16px #6FE;
   border-radius: 50%;
}
@keyframes load-effect
{
0%
{
transform:rotate(0deg);
}
100%
{
transform:rotate(360deg);
}
}
.load::before
{
position:absolute;
content:"";
width:101px;
height:202px;
background:#000;
left:101px;
animation: load-effect 2s infinite;/*infinite表示动画无限次播放*/
transform-origin:0px 101px;/*transform-origin 属性允许您改变被转换元素的位置。 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。*/
}
.load::after
{
position:absolute;
content:"";
width:202px;
height:202px;
border-radius:50%;
left:0;
box-shadow:inset 0 0 0 16px rgba(255,255,255,.3);
}
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

星空·无限 发表于 2019-1-11 11:21:21

本帖最后由星空·无限于 2019-1-11 11:25 编辑

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
   .load{
         top: 100px;
         width: 500px;
         height: 10px;
         background: #cccccc;
         position: relative;
         margin: 0 auto;
         text-indent: -9999px;
         border-radius: 10px;
         overflow: hidden;
   }
   .load::before{
         content: '';
         width: 500px;
         height: 10px;
         background: #ff4d69;
         position: absolute;
         border-radius: 10px;
         left: -100%;
   }
   .load:hover::before{
         animation: move 2s;
   }
   @keyframes move{
         from{
            left: -100%;
         }
         to{
            left: 0%;
         }
   }
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

你在意在便在 发表于 2019-11-6 15:54:07

加油~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
/* 清除样式调整位置 */
* {
   margin:0;
   padding:0;
}
body {
   background:#2ecc71;
   margin:100px;
}
/* 最底层 */
.load {
   position:relative;
   text-indent:-9999px; /*隐藏文字方法之一*/
   width:222px;
   height:222px;
   background: #9b59b6;
   box-shadow:inset 0 0 0 15px #6FE;
   border-radius:50%;
}
/*中间层*/
.load::before {
   content:'';
   width:111px;
   height:111px;
   background:rgba(52, 152, 219);
   position:absolute;
   left:111px;
   border-radius:0 111px 0 0;
}
/*最顶层*/
.load::after {
   content:'';
   position: absolute;
   width:222px;
   height:222px;
   box-shadow: inset 0 0 0 15px rgba(255,255,255,.5);
   left:0;
   border-radius:50%;
}
/* 设定动画 */
@keyframes flash{
   0% {
            transform: rotate(0deg);
   }
   25% {
            transform: rotate(90deg);
   }
   50% {
            transform: rotate(180deg);
   }
   75% {
            transform: rotate(270deg);
   }
   100% {
            transform: rotate(360deg);
   }
}
/* 载入动画并固定动画位置 */
.load::before {
   animation: flash 2.5s infinite linear;
   transform-origin:0px 111px;
}
/* 覆盖样式实现画面注释内容，更清晰*/
body {
   background: #000;
}
.load {
   background: none;
}
.load::before {
   background: #000;
}
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

suweixuan1998 发表于 2020-1-11 11:09:15

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>进度条</title>
<style type="text/css">
   body{
         background: #000000;
         margin: 100px;
   }
   .load {
         text-indent: -9999px;
         position: relative;
         width: 202px;
         height: 202px;
         box-shadow: inset 0 0 0 16px #6FE;
         border-radius: 50%;
   }
   .load::before{
         position: absolute;
         content: '';
         width: 101px;
         height: 202px;
         background: #FF88C2;
         left: 101px;
         border-radius: 0 202px 202px 0;
         background: #000;
         animation: load-effect 2s infinite;
         transform-origin: 0px 101px;
   }
   .load::after{
         position: absolute;
         content: '';
         width: 202px;
         height: 202px;
         border-radius: 50%;
         left: 0;
         box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
   }
   @keyframes load-effect {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
   }
</style>
</head>
<body>
<div class="load">Loading</div>
</body>
</html>

小脑斧 发表于 2020-3-18 15:46:49

页: [1]

鱼C论坛's Archiver