css环形滚动_内容加载的环形滚动动画效果

云端漂移 2020-07-17

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可。  

使用的css3 特性:

  1. transform属性的 rotate,共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

  2. animation :实现到类似于 Loading 动画的效果

代码:

<div class="donut"></div>
<style>
@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}
</style>

新片场https://www.wode007.com/sites/73286.html 傲视网https://www.wode007.com/sites/73285.html

说明:使用半透明的border 对于整个元素,除了用作圆环加载指示器的一侧。使用animation 旋转元素。

效果如下:

css环形滚动_内容加载的环形滚动动画效果 
 

相关推荐

aSuncat / 0评论 2020-08-18