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