经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3动画之DIY Loading动画
来源：jb51　　时间：2018/12/29 9:36:11　　对本文有异议

首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称；规定动画的时长。

css3动画属性

Loading动画1：

点.gif

  1. <!-- html代码 总共8个点 -->
  2.  <div class="point-loading">
  3.         <span class="point"></span>
  4.         <span class="point"></span>
  5.         <span class="point"></span>
  6.         <span class="point"></span>
  7.         <span class="point"></span>
  8.         <span class="point"></span>
  9.         <span class="point"></span>
  10.         <span class="point"></span>
  11.     </div>
  1. /*css样式代码*/
  2. /*定义动画*/
  3. @keyframes pointLoading {
  4.     0% {
  5.         transform: scale(1);
  6.         opacity: 1;
  7.     }
  8.     100% {
  9.         transform: scale(.3);
  10.         opacity: 0.5;
  11.     }
  12. }
  13. /*定义样式*/
  14. .point-loading {
  15.     width: 100px;
  16.     height: 100px;
  17.     position: relative;
  18.     margin: 0 auto;
  19.     margin-top: 150px;
  20.     margin-bottom: 100px;
  21. }
  22. .point-loading .point {
  23.     width: 20px;
  24.     height: 20px;
  25.     border-radius: 50%;
  26.     background: lightgreen;
  27.     position: absolute;
  28.     animation-name:pointLoading;   /*绑定动画*/
  29.     animation-duration:1s; /*绑定动画完成一个周期所用时间*/
  30.     animation-iteration-count:infinite; /*动画播放次数  默认是1，infinite无限次播放*/
  31. }
  32. /*nth-child:选择器匹配属于其父元素的第 N 个子元素；animation-delay:动画延迟播放*/
  33. .point-loading .point:nth-child(1) {
  34.     left: 0;
  35.     top: 50%;
  36.     margin-top: -10px;
  37.     animation-delay: 0.13s;
  38. }
  39. .point-loading .point:nth-child(2) {
  40.     left: 14px;
  41.     top: 14px;
  42.     animation-delay: 0.26s;
  43. }
  44. .point-loading .point:nth-child(3) {
  45.     left: 50%;
  46.     top: 0;
  47.     margin-left: -10px;
  48.     animation-delay: 0.39s;
  49. }
  50. .point-loading .point:nth-child(4) {
  51.     top: 14px;
  52.     right: 14px;
  53.     animation-delay: 0.52s;
  54. }
  55. .point-loading .point:nth-child(5) {
  56.     right: 0;
  57.     top: 50%;
  58.     margin-top: -10px;
  59.     animation-delay: 0.65s;
  60. }
  61. .point-loading .point:nth-child(6) {
  62.     right: 14px;
  63.     bottom: 14px;
  64.     animation-delay: 0.78s;
  65. }
  66. .point-loading .point:nth-child(7) {
  67.     bottom: 0;
  68.     left: 50%;
  69.     margin-left: -10px;
  70.     animation-delay: 0.91s;
  71. }
  72. .point-loading .point:nth-child(8) {
  73.     bottom: 14px;
  74.     left: 14px;
  75.     animation-delay: 1.04s;
  76. }

Loading动画2：

圆环.gif

  1.  <!-- html代码 -->
  2. <div class="loading"></div>
  1. /*css代码*/
  2. /*首先是定义动画效果*/
  3. @keyframes rotateLoading {
  4.     from {
  5.         transform:rotate(0deg);
  6.     }
  7.     100% {
  8.         transform: rotate(360deg);
  9.     }
  10. }
  11. /*定义基本样式，绑定动画，定义动画属性*/
  12. .loading {
  13.     margin: 50px auto;
  14.     width: 100px;
  15.     height: 100px;
  16.     border-radius: 50%;
  17.     border: 10px solid  rgba(0, 0, 0, 0.2);
  18.     border-top-color: #000;
  19.     position: relative;
  20.     animation-name: rotateLoading;
  21.     animation-timing-function: linear;
  22.     animation-duration: 1.1s;
  23.     animation-iteration-count: infinite;
  24. }

Loading动画3：

柱状.gif

  1. <!--html代码 共5个柱状 -->
  2.  <div class="pillar-loading">
  3.         <span class="pillar"></span>
  4.         <span class="pillar"></span>
  5.         <span class="pillar"></span>
  6.         <span class="pillar"></span>
  7.         <span class="pillar"></span>
  8.     </div>
  1. /*css代码*/
  2. @keyframes pillarLoading {
  3.     0%,
  4.     100% {
  5.         background: lightgreen;
  6.     }
  7.     50% {
  8.         transform: scaleY(1.75);
  9.         background: lightblue;
  10.     }
  11. }
  12.  
  13. .pillar-loading {
  14.     margin: 150px auto;
  15.     width: 60px;
  16.     display: flex;
  17.     justify-content: space-between;
  18. }
  19. .pillar-loading .pillar {
  20.     width: 8px;
  21.     height: 40px;
  22.     border-radius: 4px;
  23.     background: lightgreen;
  24.     animation-name: pillarLoading;
  25.     animation-iteration-count: infinite;
  26.     animation-duration: 1s;
  27.     animation-timing-function: ease;
  28. }
  29. .pillar-loading .pillar:nth-child(2){
  30.     animation-delay: 0.2s;
  31. }
  32. .pillar-loading .pillar:nth-child(3){
  33.     animation-delay: 0.4s;
  34. }
  35. .pillar-loading .pillar:nth-child(4){
  36.     animation-delay: 0.6s;
  37. }
  38. .pillar-loading .pillar:nth-child(5){
  39.     animation-delay: 0.8s;
  40. }

以上3个动画是Animation动画的简单示例。

下面再说一个动画必备属性 transform。

transform 本意是变形，变换之意，在 CSS 中使用该属性可对元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。因其有着各种特效及优良的性能，所以成为动画的标配。

** 转换方法**

transform转换方法

一个简单的小球动画，鼠标移到小球上或者空白框内，小球开始做动画，鼠标移出，动画停止。

小球动画

  1.  <!-- html代码 -->
  2. <div class="box">
  3.         <div class="circle"></div>
  4.     </div>
  1. .box {
  2.           width: 600px;
  3.           height: 200px;
  4.           border: 1px solid #ccc;
  5.           background: #fff;
  6.           margin: 50px,auto
  7. }
  8. .circle {
  9.             width: 50px;
  10.             height: 50px;
  11.             background: blue;
  12.             border-radius: 50%;
  13.             margin: 75px,0;
  14.             transition: all 2s   /*2s完成*/
  15. }
  16. .box:hover .circle {
  17.            background: red;
  18.            transform: translate(550px,0)   /*沿x轴偏移550px*/
  19. }

再来一个稍微难一点的。

transform动画

  1. <!-- html代码 -->
  2. <a href="https://y.qq.com/n/yqq/album/002JRl3m16wLPL.html" class="playlist-item">
  3.         <div class="item-bd">
  4.             <img class="item-img" src="http://coding.imweb.io/img/p3/transition-hover.jpg" alt="">
  5.             <i class="icon-play"></i>
  6.         </div>
  7.         <div class="item-ft">
  8.             <h3 class="item-tt">漂洋过海来看你 OST 原声辑</h3>
  9.             <p class="item-author">严艺丹</p>
  10.         </div>
  11.     </a>
  1. /*css样式代码*/
  2. .playlist-item {
  3.     display: block;
  4.     margin-top: 100px;
  5.     width: 300px;
  6.     background: rgba(0, 0, 0, .6);
  7. }
  8. .playlist-item:hover {
  9.     background: #31c27c;
  10. }
  11.  
  12. .playlist-item .item-bd {
  13.     overflow: hidden;
  14.     position: relative;
  15. }
  16. .playlist-item .item-img {
  17.     width: 100%;
  18.     transition:all 0.75s;
  19. }
  20. .playlist-item .icon-play {
  21.     position: absolute;
  22.     top: 50%;
  23.     left: 50%;
  24.     transform: translate(-50%, -50%) scale(.7);
  25.     width: 70px;
  26.     height: 70px;
  27.     background: url(http://coding.imweb.io/img/p3/transition-cover_play.png) no-repeat;
  28.     opacity: 0;
  29. }
  30. .playlist-item .item-bd:hover .item-img {
  31.     transform:scale(1.1);
  32. }
  33. .playlist-item .item-bd:hover .icon-play {
  34.     opacity: 0.8;
  35.     transform: translate(-50%, -50%) scale(1);
  36. }
  37. .playlist-item .item-ft {
  38.     color: #fff;
  39.     padding: 15px 10px;
  40.     text-align: center;
  41. }
  42. .playlist-item .item-tt {
  43.     font-size: 16px;
  44.     position: relative;
  45.     display: inline-block;
  46.     vertical-align: middle;
  47. }
  48. .playlist-item .item-tt::after {
  49.     content: "...";
  50.     width: 18px;
  51.     height: 18px;
  52.     font-size: 12px;
  53.     color: #fff;
  54.     border-radius: 50%;
  55.     border: 2px solid #fff;
  56.     position: absolute;
  57.     right: -25px;
  58.     top: 50%;
  59.     transform: translate(0, -50%);
  60.     line-height: 0.6;
  61.     box-sizing: border-box;
  62.     opacity: 0;
  63.     transition:all 0.75s;
  64. }
  65. .playlist-item .item-author {
  66.     color: #999;
  67. }
  68. .playlist-item:hover .item-author {
  69.     color: #c1e9d5;
  70. }
  71. .playlist-item:hover .item-tt::after {
  72.     opacity:1;
  73. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号