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

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

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

css3动画,监控动画执行完毕

CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。

CSS中过渡与动画的区别有哪些?

过度是在动画基础上增加的,作用是如何实施动画,比如一个div从一个地方到另一个地方,设置时长,是匀速前进,或者从快到慢等,这种就是过渡。

Js封装一个简单的动画函数

动画函数多个目标值之间移动,1、如果是正值,则向大取整 2、如果是负值,则向小取整。清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器;创建定时器,清除定时器,页面中就没有定时器

彻底掌握css动画【transition】

说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3

JS 运动的实现

缓冲运动:首先给物体定义一个速度,速度是物体与XY轴的距离除以8,在定时器以30mm,,如果物体到了,判断物体的坐标是否达到终点,如果是正向运动,速度大于0,因为计算机解析像素点不能为小数

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

CSS3 动画的实现

什么是CSS3动画?在CSS中,动画是一种让元素逐渐改变样式的效果。 您可以使用@keyframes关键字创建动画,后跟动画的名称。要使动画跨浏览器兼容,您需要使用供应商前缀:

css3动画怎么停止?

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 \\\"from\\\" 和 \\\"to\\\",等同于 0% 和 100%。

使用jquery封装的动画脚本(无动画、css3动画、js动画)

自己封装好的showhide.js包含无动画、css3动画、js动画,包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlideUpDown(淡入淡出+上下滑动) fadeSlideLeftRight (淡入淡出+左右滑动)

网页动画的十二原则

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

点击更多...

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