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

2020-07-17 23:32:22 阅读：319 来源： 互联网

标签：动画 rotate 滚动 transform 环形旋转 donut border css

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

使用的css3 特性:

transform属性的 rotate，共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
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 旋转元素。

效果如下：

标签：动画,rotate,滚动,transform,环形,旋转,donut,border,css
来源： https://www.cnblogs.com/ypppt/p/13334052.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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