怎么用CSS3实现炫酷loading加载动画特效
本篇内容主要讲解“怎么用CSS3实现炫酷loading加载动画特效”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用CSS3实现炫酷loading加载动画特效”吧!
创新互联建站是一家专业提供商水企业网站建设,专注与成都网站建设、网站制作、HTML5、小程序制作等业务。10年已为商水众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
安装
可以通过bower来按钮这个loading动画特效:
bower install loaders.css
使用方法
使用这个loading加载动画特效的时候,建议将效果中所需要的HTML元素包裹在一个容器中,并将包裹容器的显示设置为:display:flex,下面以“吃豆子”加载动画为例:
外围div.loader是包裹元素,它的显示要设置为:display:flex。
CSS动画
5个空的div中,第一个使用div:first-of-type选择器来选择并将其制作为吃豆人(pacman),余下的4个div分别使用nth-child选择器来选择并制作为“豆子”。最后使用CSS3 keyframes动画将“豆子”运动起来:
@-webkit-keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
@keyframes pacman-balls {
75% {
opacity: 0.7; }
100% {
-webkit-transform: translate(-100px, -6.25px);
transform: translate(-100px, -6.25px); } }
.pacman {
position: relative; }
.pacman > div:nth-child(2) {
-webkit-animation: pacman-balls 1s 0s infinite linear;
animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:nth-child(3) {
-webkit-animation: pacman-balls 1s 0.25s infinite linear;
animation: pacman-balls 1s 0.25s infinite linear; }
.pacman > div:nth-child(4) {
-webkit-animation: pacman-balls 1s 0.5s infinite linear;
animation: pacman-balls 1s 0.5s infinite linear; }
.pacman > div:nth-child(5) {
-webkit-animation: pacman-balls 1s 0.75s infinite linear;
animation: pacman-balls 1s 0.75s infinite linear; }
.pacman > div:first-of-type {
width: 0px;
height: 0px;
border-right: 25px solid transparent;
border-top: 25px solid #fff;
border-left: 25px solid #fff;
border-bottom: 25px solid #fff;
border-radius: 25px;
}
.pacman > div:nth-child(2), .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5) {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
-webkit-transform: translate(0, -6.25px);
-ms-transform: translate(0, -6.25px);
transform: translate(0, -6.25px);
top: 25px;
left: 100px;
}
到此,相信大家对“怎么用CSS3实现炫酷loading加载动画特效”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站标题:怎么用CSS3实现炫酷loading加载动画特效
当前网址:http://pwwzsj.com/article/jshege.html