用 CSS3 动画功能，做一个有逼格的加载动画

canopus4u 发布于2019-08-29 18:31 / 1186人阅读

摘要：主要用到的知识点参阅菜鸟教程动画延时实现说明用于区别四个不同点，里放通用样式重点如果了解，看这个更清晰些，如果不懂，看下面生成的定死容器的高度，不然会上下浮动横向排列子元素纵向排列子元素去掉最后一个

主要用到的知识点：

参阅菜鸟教程： http://www.runoob.com/css3/cs...

frame

animation / 动画延时

flex

实现 HTML

说明： loading-1/2/3/4 用于区别四个不同点，loading-item 里放通用样式

CSS 重点

如果了解 less，看这个更清晰些，如果不懂，看下面生成的 css

LESS

@red: #FF3B30;
@orange: #FF9500;
@black: #373737;
@green: #4CD964;

@load-box-height: 50px;

.loading{
  height: @load-box-height; // 定死容器的高度，不然会上下浮动
  margin: 20px 0;
  display: flex;
  align-items: center; // 横向排列子元素
  justify-content: center; // 纵向排列子元素
  .loading-item{
    height: @load-box-height;
    width: 10px;
    margin-right: 10px;
    &:last-child{ // 去掉最后一个的右边距
      margin-right: 0;
    }
  }
  &-1{
  // 【参数分别为】 动画key名，一次动画的持续时间，循环方式，过滤规则，动画起始延时时间
    -webkit-animation: load-frame 1s infinite linear 0s;
    -o-animation: load-frame 1s infinite linear 0s;
    animation: load-frame 1s infinite linear 0s;
    background-color: @red;
  }
  &-2{
    -webkit-animation: load-frame 1s infinite linear 0.25s; 
    // 通过控制延时，只用一个keyframe 就能做出渐变效果
    -o-animation: load-frame 1s infinite linear 0.25s;
    animation: load-frame 1s infinite linear 0.25s;
    background-color: @orange;
  }
  &-3{
    -webkit-animation: load-frame 1s infinite linear 0.5s;
    -o-animation: load-frame 1s infinite linear 0.5s;
    animation: load-frame 1s infinite linear 0.5s;
    background-color: @black;
  }
  &-4{
    -webkit-animation: load-frame 1s infinite linear 0.75s;
    -o-animation: load-frame 1s infinite linear 0.75s;
    animation: load-frame 1s infinite linear 0.75s;
    background-color: @green;
  }
}

@keyframes load-frame {
  0% {height: @load-box-height;}
  50% {height: @load-box-height * 0.25;}
  // 设置动画中间的高度，此时为最低，为原高度的25%
  100% {height: @load-box-height;}
}

@-webkit-keyframes load-frame { // safari & chrome
  0% {height: @load-box-height;}
  50% {height: @load-box-height * 0.25;}
  100% {height: @load-box-height;}
}

CSS

.loading {
  height: 50px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading .loading-item {
  height: 50px;
  width: 10px;
  margin-right: 10px;
}
.loading .loading-item:last-child {
  margin-right: 0;
}
.loading-1 {
  -webkit-animation: load-frame 1s infinite linear 0s;
  -o-animation: load-frame 1s infinite linear 0s;
  animation: load-frame 1s infinite linear 0s;
  background-color: #FF3B30;
}
.loading-2 {
  -webkit-animation: load-frame 1s infinite linear 0.25s;
  -o-animation: load-frame 1s infinite linear 0.25s;
  animation: load-frame 1s infinite linear 0.25s;
  background-color: #FF9500;
}
.loading-3 {
  -webkit-animation: load-frame 1s infinite linear 0.5s;
  -o-animation: load-frame 1s infinite linear 0.5s;
  animation: load-frame 1s infinite linear 0.5s;
  background-color: #373737;
}
.loading-4 {
  -webkit-animation: load-frame 1s infinite linear 0.75s;
  -o-animation: load-frame 1s infinite linear 0.75s;
  animation: load-frame 1s infinite linear 0.75s;
  background-color: #4CD964;
}
@keyframes load-frame {
  0% {height: 50px;}
  50% {height: 12.5px;}
  100% {height: 50px;}
}
@-webkit-keyframes load-frame {
  0% {height: 50px;}
  50% {height: 12.5px;}
  100% {height: 50px;}
}

最后，WA-LA，完成

idc机房托管专线服务 css3动画有逼格高性能css3动画加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114390.html

用 CSS3 动画功能，做一个有逼格的加载动画

摘要：主要用到的知识点参阅菜鸟教程动画延时实现说明用于区别四个不同点，里放通用样式重点如果了解，看这个更清晰些，如果不懂，看下面生成的定死容器的高度，不然会上下浮动横向排列子元素纵向排列子元素去掉最后一个 showImg(https://segmentfault.com/img/bVbqZDr?w=936&h=432); 主要用到的知识点：参阅菜鸟教程： http://www.runoob...

546669204 2019-08-02 16:11 评论0 收藏0
巧用Android图片资源，打造更精致的APP

摘要：所以完美的方案就是，需要提供尺寸均一的大图片，适配到下相比微信的高清图片资源，展现的精致效果在级别及更高版本中，可定义矢量图片，而且图片可在不损失清晰度的情况下缩放。前言由于android系统的开放性，以及IOS的相对封闭。第三方设备想要使用苹果的OS，目前来说是不可能。所以，各厂商纷纷的投入了android的怀抱，android阵营也越来越强大，如今移动操作系统也就是androi...

iamyoung001 2019-06-25 10:52 评论0 收藏0
Android酷炫动画效果

摘要：高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果，便是其中一种。 Android自定义View：一个精致的打钩小动画一个精致的打钩动画。 Android 自定义水平进度条圆角进度项目中实现进度条进度过程中显示圆角样式 ViewPager系列之仿魅族应用的广告BannerView 前言 Banner广告位是APP ...

scq000 2019-06-25 11:48 评论0 收藏0
Vue一个案例引发「动画」的使用总结

摘要：既然我们知道了方法，我们就来给它加一个简单的动画。动画中还给我们提供了一些钩子函数，我们可以使用钩子函数构建动画。它会告知我们的动画完成，我们绑定了为，告诉组件跳过的检测，使用。项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。对，你说的没错...

liuchengxu 2019-08-23 13:43 评论0 收藏0
如何机制地回答浏览器兼容性问题

摘要：前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如何才是我们正确回答这个问题的姿势呢。前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如...

leanote 2019-08-22 18:31 评论0 收藏0