欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单的一个加载动画

程序员文章站 2022-06-11 18:09:02
...

首先还是先创建HTML文件

<body>
 <div class="one">
   <div class="two">
      <div class="three">
      </div>
   </div>
</div>
</body>

这里由于我要使用三个快元素,所以我创建了三个div,当然,你需要几个就可以建几个。
我们的需求是一个加载动画,所以一般情况下是需要转动的,圆形转动是最常见的,因此我们选择用圆形来搭建这个动画。由于要加载,用一个圆转是很单调的,也不易于欣赏,因此选择用三个圆来搭建。接下来把HTML中的三个div用css渲染成我们需要的样子。

接着创建css文件

<style>
  div.one{
    width:200px;
    height:200px;
    border-radius:50%;
    border:2px solid orange;
    }
 div{
    width:150px;
    height:150px;
    border-radius:50%;
    border:2px solid purple;
    }
 div{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:white;
    }


</style>

写到这发现啥了没?是不是每个div都有border-radius:50%,这就是将块元素,当然要宽高一样的块元素变成圆的代码;为了咱们的效果,所以前两个我们选用他们的边框,最里面的选用它本身。为什么最里面的div是要设置成白色呢?因为我们的效果一般都不是在纯白的页面用的,因此设置成白色也无所谓,当然你可以设置成喜欢的颜色。紧接着我们发现,这三个圆都在左上角显示,一环套一环,没关系,这儿只需要加一个绝对定位并让他们居中就好了。把body的背景颜色换成黑色,让效果更明显。

<style>
  .one,.two,.three{
     position:absolute;
     left:0;right:0;top:0;bottom:0;
     margin:auto;
}
body{
background-color:black;
}
</style>

这样大体框架就搭好了,接着,我们发现最外面的两个div选用1/4的话效果比较好,因此我们给他们两加样式,让他们变得更美观。

<style>
  div.one,div.two{
    border-top:2px solid black;
    border-bottom:2px solid black;
    border-right:2px solid black;
    }

</style>

为什么要这么写而不是直接让border-left:2px solid orange;因为这样写下来你会发现这个1/4的圆从中间渐渐缩小,这样效果不好,因此我们选择先让他们都有边框,再让上右下的颜色和屏幕背景颜色一样,这样我们看到的就是1/4的宽度相同的一个圆弧。这个样式一定要写在div.one和div.two之后,这样他们才能发挥效用。接着就该写动画了。

动画制作

这次是让三个圆转动,但第一个和第二个都是边框看效果,因此我们可以将第一个和第二个动画只写一个,可以让他两同时转也可以让他两分开转,也就是有差异的转,只需要修改转一圈所需要的时间即可。动画代码如下:

<style>
@keyframes one{
   0%{
   transform:rotateZ(0deg);
   }
   100%{
   transform:rotateZ(360deg);
   }
}

@keyframes three{
    0%{
    transform:scale(1,1);
    }
    100%{
    transform:scale(0.1,0.1);
    }
}
</style>

前两个div我们让他旋转,最里面的div.three我们让他缩小放大。

<style>
   .one{
   animation:one 2s linear infinite;
   }
   .two{
   animation:one 4s linear infinite;
.three{
animation:three 0.5s ease-in infinite alternate;
}
</style>

这样三个的动画就写完了,这个简单的加载动画也就写完了。最后效果是:
简单的一个加载动画
简单的一个加载动画