css3特效_CSS3弹跳Loading加载动画特效的实现

时间: 2018-10-29阅读: 807标签: css3

今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动、流畅。兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果。


反弹加载动画效果如下:

代码的实现:

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>
<style>
	@keyframes bouncing-loader {
	  from {
	    opacity: 1;
	    transform: translateY(0);
	  }
	  to {
	    opacity: 0.1;
	    transform: translateY(-1rem);
	  }
	}
	.bouncing-loader {
	  display: flex;
	  justify-content: center;
	}
	.bouncing-loader > div {
	  width: 1rem;
	  height: 1rem;
	  margin: 3rem 0.2rem;
	  background: #8385aa;
	  border-radius: 50%;
	  animation: bouncing-loader 0.6s infinite alternate;
	}
	.bouncing-loader > div:nth-child(2) {
	  animation-delay: 0.2s;
	}
	.bouncing-loader > div:nth-child(3) {
	  animation-delay: 0.4s;
	}
</style>


说明:

注:1rem 通常是16px 。 
@keyframes定义了一个具有两种状态的动画,其中元素更改opacity并使用transform: translateY()在2D平面上进行transform: translateY() 。
.bouncing-loader是弹跳圆圈的父容器,使用display: flex和justify-content: center将它们放置在中心位置。  
.bouncing-loader > div ,将父级的三个子div作为样式。 div的宽度和高度为1rem ,使用border-radius: 50%将它们从正方形变成圆形。 
margin: 3rem 0.2rem 指定每个圆的上边距/下边距为3rem 和左/右边距0.2rem 以便它们不直接接触对方,给它们一些呼吸空间。 
animation是各种动画属性的缩写属性:使用animation-name , animation-duration , animation-iteration-count , animation-direction 。 nth-child(n)目标是其父元素的第n个子元素。 
animation-delay分别用于第二个和第三个div ,以便每个元素不会同时启动动画。 


来自:30 seconds of css


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

理解 CSS3中 object-fit

在检查网站的时候发现图片给于固定宽的时候,会压缩变形,要保证,img元素不变形,宽高比不变。从别人那里了解到object-fit,以前从未用过,所以就总结给自己看看,理解一下。

css3常用动效以及总结

box-shadow:盒子阴影,可以给卡片添加提高美化效果。可广泛应用于内容展示页面。css3 过渡:最简单的过渡是一个div,给它加上如下代码,便可以从宽度100px华丽的过渡到宽度为300px。

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

用CSS3实现无限循环的无缝滚动

使在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢;使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下

css3中计数器的使用

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全