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

时间: 2018-11-07阅读: 2586标签: 动画

创建一个没有背景的圆,然后声明透明度为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>

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


效果如下:


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1280

CSS动画@keyframes的用法

CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash!IE10+支持该属性的。其他低浏览器版本数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。

window.requestAnimationFrame 使用方式

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数

CSS动画优雅降级的简单总结

可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d),主要功臣自然是translate3d,因为IE9不支持自然会忽略掉,所以translate也在IE下不起效了

值得你收藏的10个CSS3动画工具

在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切

用js实现一个无限循环的动画

为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。既然setInterval可以搞定为啥还要用requestAnimationFrame呢?

CSS3动画:animation

可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张;1.animation-name对象的动画名称,以便后续设置动画属性时使用默认为none

css3 动画的暂停和重新开始

CSS3的animation直接提供一个 animation-play-state 属性规定动画正在运行还是暂停 。写动画样式的时候特别注意下不同浏览器的兼容性,加上对应的前缀 :

js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

主要实现以下几种简单的动画效果(其实原理基本相同):1.匀速动画:物体的速度固定2.缓动动画:物体速度逐渐变慢3.多物体动画

JS动画与CSS动画

JS动画优点:过程控制能力强。可以对动画工程进行精准的控制,暂停、取消、开始、终止都可以。动画效果多、炫酷。有一些效果是CSS动画所不能实现的

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!