先说一个今天在开发过程中遇到的问题。

对同一个元素同时使用transform和animation，transform会失效。
解决办法：就是在这个元素的外层再加一层div，对外层的div进行transform，对内层div进行animation就可以解决了。

CSS常用动画库

animates.css
github地址 https://github.com/daneden/animate.c查看演示地址 https://daneden.github.io/animate.css/

Hover.css http://ianlunn.github.io/Hover/

Magic动画库制作CSS3动画特效 http://www.17sucai.com/pins/demoshow/10001

CSS动画简介 http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

一，CSS常用代码

  2. border-radius: 6px;
  4. border-radius: 50%;
  6. box-shadow: 1px 1px 1px #666; 
  8. .text-style {
  9.     text-shadow: 5px 5px 5px #FF0000; 
  10.     word-wrap: break-word; 
  11.     text-overflow: ellipsis; 
  12. }
  14. .transform {
  15.     transform: translate(50px, 100px); 
  16.     transform: rotate(30deg); 
  17.     transform: scale(2, 4); 
  18.     transform: skew(30deg, 20deg); 
  19.     transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); 
  20.     transform: rotateX(120deg); 
  21.     transform: rotateY(130deg); 
  22.     -ms-transform: rotateY(130deg); 
  23.     -webkit-transform: rotateY(130deg); 
  24.     -o-transform: rotateY(130deg); 
  25.     -moz-transform: rotateY(130deg); 
  26. }
  29. .linear-gradient {
  30.     width: 400px;
  31.     height: 60px;
  33.     background-color: #063053;
  35.     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
  49.     background-image: linear-gradient(#063053, #395873, #5c7c99);
  50. }
  52. background-image: linear-gradient(180deg, #5e00b7, #d76c00);
  54. background-image: linear-gradient(red, green, blue, purple, orange);
  56. .gradient1   {
  57.     width: 400px;
  58.     height: 400px;
  59.     background-color: #4B770A;
  60.     background-image: -webkit-gradient(radial,
  61.     50% 200, 1,
  62.     50% 200, 200,
  63.     from(rgba(255, 255, 255, 0.3)),
  64.     to(rgba(255, 255, 255, 0)));
  67. }

二，单个能直接拿来用的CSS 3.0 动画

（一），hover时的动画

1，360°旋转 修改rotate(旋转度数)
  1. <div class="transform1 box">div</div>
  2. .box {
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #fac;
  6. }
  7. .transform1 {
  8.     transition: All 0.4s ease-in-out;
  9.     -webkit-transition: All 0.4s ease-in-out;
  10.     -moz-transition: All 0.4s ease-in-out;
  11.     -o-transition: All 0.4s ease-in-out;
  12. }
  14. .transform1:hover {
  15.     transform: rotate(360deg);
  16.     -webkit-transform: rotate(360deg);
  17.     -moz-transform: rotate(360deg);
  18.     -o-transform: rotate(360deg);
  19.     -ms-transform: rotate(360deg);
  20. }

2，放大 修改scale(放大的值)
  1. <div class="transform2 box">div</div>
  2. .box {
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #fac;
  6. }
  7. .transform2 {
  8.     transition: All 0.4s ease-in-out;
  9.     -webkit-transition: All 0.4s ease-in-out;
  10.     -moz-transition: All 0.4s ease-in-out;
  11.     -o-transition: All 0.4s ease-in-out;
  12. }
  14. .transform2:hover {
  15.     transform: scale(1.2);
  16.     -webkit-transform: scale(1.2);
  17.     -moz-transform: scale(1.2);
  18.     -o-transform: scale(1.2);
  19.     -ms-transform: scale(1.2);
  20. }

3，旋转放大 修改rotate(旋转度数) scale(放大值)
  1. <div class="transform3 box">div</div>
  2. .box {
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #fac;
  6. }
  7. .transform3 {
  8.     transition: All 0.4s ease-in-out;
  9.     -webkit-transition: All 0.4s ease-in-out;
  10.     -moz-transition: All 0.4s ease-in-out;
  11.     -o-transition: All 0.4s ease-in-out;
  12. }
  14. .transform3:hover {
  15.     transform: rotate(360deg) scale(1.2);
  16.     -webkit-transform: rotate(360deg) scale(1.2);
  17.     -moz-transform: rotate(360deg) scale(1.2);
  18.     -o-transform: rotate(360deg) scale(1.2);
  19.     -ms-transform: rotate(360deg) scale(1.2);
  20. }

4，上下左右移动 修改translate(x轴,y轴)
  1. <div class="transform4 box">div</div>
  2. .box {
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #fac;
  6. }
  7. .transform4 {
  8.     transition: All 0.4s ease-in-out;
  9.     -webkit-transition: All 0.4s ease-in-out;
  10.     -moz-transition: All 0.4s ease-in-out;
  11.     -o-transition: All 0.4s ease-in-out;
  12. }
  14. .transform4:hover {
  15.     transform: translate(0, -10px);
  16.     -webkit-transform: translate(0, -10px);
  17.     -moz-transform: translate(0, -10px);
  18.     -o-transform: translate(0, -10px);
  19.     -ms-transform: translate(0, -10px);
  20. }

以上动画通过用SCSS改造
  2. @mixin dz($time:0.25s){
  3.     -webkit-transition: all $time ease-in-out;
  4.     -moz-transition: all $time ease-in-out;
  5.     -o-transition: all $time ease-in-out;
  6.     -ms-transition: all $time ease-in-out;
  7.     transition: all $time ease-in-out;
  8. }
  10. @mixin xz($deg:360){
  11.     transform:rotate($deg+deg);
  12.     -webkit-transform:rotate($deg+deg);
  13.     -moz-transform:rotate($deg+deg);
  14.     -o-transform:rotate($deg+deg);
  15.     -ms-transform:rotate($deg+deg);
  16. }
  18. @minxin fd($s1:1.2){
  19.     transform:scale($s1);
  20.     -webkit-transform:scale($s1);
  21.     -moz-transform:scale($s1);
  22.     -o-transform:scale($s1);
  23.     -ms-transform:scale($s1);
  24. }
  26. @mixin xzfd($deg:360,$s1:1.2){
  27.     transform:rotate($deg+deg) scale($s1);
  28.     -webkit-transform:rotate($deg+deg) scale($s1);
  29.     -moz-transform:rotate($deg+deg) scale($s1);
  30.     -o-transform:rotate($deg+deg) scale($s1);
  31.     -ms-transform:rotate($deg+deg) scale($s1);
  32. }
  34. @mixin yd($s1:0,$s2:0){
  35.     transform:translate($s1,$s2);
  36.     -webkit-transform:translate($s1,$s2);
  37.     -moz-transform:translate($s1,$s2);
  38.     -o-transform:translate($s1,$s2);
  39.     -ms-transform:translate($s1,$s2);
  40. }
  41. 使用方法
  43.     @include dz();
  44.     &:hover {
  45.         @include yd(-10px,-10px);
  46.     }
  47. }

5，鼠标悬停抖动效果

常用动画 - 图1

WechatIMG63.jpeg

  1. <div class="lanren">Hover Me</div>
  1. .lanren {
  2.    margin: 100px auto;
  3.    width: 100px;
  4.    text-align: center;
  5.     height: 40px;
  6.     line-height: 40px;
  7.     border: 1px solid #CCC;
  8.     border-radius: 2px;
  9. }
  10. .lanren:hover {
  11.    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  12.    transform: translate3d(0, 0, 0);
  13.    backface-visibility: hidden;
  14.    perspective: 1000px;
  15. }
  16. @keyframes shake {
  17.    10%, 90% {
  18.       transform: translate3d(-1px, 0, 0);
  19.    }
  20.    20%, 80% {
  21.       transform: translate3d(2px, 0, 0);
  22.    }
  23.    30%, 50%, 70% {
  24.       transform: translate3d(-4px, 0, 0);
  25.    }
  26.    40%, 60% {
  27.       transform: translate3d(4px, 0, 0);
  28.    }
  29. }

6，圆形边框hover动画

常用动画 - 图2

circle.png

html

  1. <div class="svg-wrapper"> 
  2.     <svg height="166" width="166" xmlns="http://www.w3.org/2000/svg"> 
  3.          <circle cx="83" fill="#f5f5f5" cy="83" r="81" class="shape" height="166" width="166"></circle> 
  4.          <div class="text">circle</div> 
  5.     </svg>
  6. </div>

css

  1.       .svg-wrapper {
  2.            position: relative;
  3.            transform: translateY(-50%);
  4.            margin: 100px 100px;
  5.            width: 164px;
  6.        }
  7.        .shape {
  8.            stroke-dasharray: 0 540;
  9.            stroke-dashoffset: -474;
  10.            stroke-width: 1px;
  11.            stroke: #19f6e8;
  12.            border-radius: 100%;
  13.            transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  14.        }
  15.        .text {
  16.            font-family: 'Roboto Condensed';
  17.            font-size: 22px;
  18.            line-height: 164px;
  19.            letter-spacing: 8px;
  20.            height:164px;
  21.            color: #b03e00;
  22.            top: 0;
  23.            position: absolute;
  24.            left:0;
  25.            width:164px;
  26.            text-align: center;
  27.        }
  28.        .svg-wrapper:hover .shape {
  29.            stroke-width: 2px;
  30.            stroke-dashoffset: 0;
  31.            stroke-dasharray: 760;
  32.            border-radius: 100%;
  33.        }

7，渐变按钮

常用动画 - 图3

WechatIMG65.jpeg

html

  1. <div class="myButton">myButton</div>

css

  1.  .myButton {
  2.     width: 300px;
  3.     height: 60px;
  4.     line-height: 60px;
  5.     text-align: center;
  7.     -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  8.     -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  9.     box-shadow:inset 0px 1px 0px 0px #ffffff;
  10.     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
  11.     background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  12.     background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  13.     background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  14.     background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  15.     background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  16.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
  17.     background-color:#ededed;
  19.     -moz-border-radius:6px;
  20.     -webkit-border-radius:6px;
  21.     border-radius:6px;
  22.     border:1px solid #dcdcdc;
  23.     display:inline-block;
  24.     cursor:pointer;
  25.     color:#777777;
  26.     font-family:arial;
  27.     font-size:30px;
  28.     font-weight:bold;
  29.     padding:6px 24px;
  30.     text-decoration:none;
  31.     text-shadow:0px 1px 0px #ffffff;
  32.     margin-top: 100px;
  33. }
  34. .myButton:hover {
  35.     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
  36.     background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  37.     background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  38.     background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  39.     background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  40.     background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
  41.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
  42.     background-color:#dfdfdf;
  43. }
  44. .myButton:active {
  45.     position:relative;
  46.     top:1px;
  47. }

（二），元素切入时的动画

元素宽度100%，高度自定义。另外，还需要根据不同屏幕宽度来做适配，屏幕翻转的时候重新适配一次。
适配的js代码

  2. <script type="text/javascript">
  3.     //适配函数
  4.     function reset() {
  5.         var wrapo = document.getElementById('wrap'),
  6.                 clientW = document.documentElement.clientWidth || document.body.clientWidth,
  7.                 designw = 640,
  8.                 scaleRate = clientW / designw;
  9.         wrapo.style.cssText = "-webkit-transform-origin:0 0;transform-origin:0 0;webkit-transform:scale(" + scaleRate + ");transform:scale(" + scaleRate + ");"
  10.     }
  11.     //初始进来执行一次适配
  12.     reset();
  13.     //当屏幕旋转的时候，再次执行一次适配
  14.     window.addEventListener('resize', function () {
  15.         setTimeout(function () {
  16.             reset();
  17.         }, 100);
  18.     }, false)
  19. </script>

html代码

  1. <div id="wrap">
  2.     <div class="up_down">从上往下透明切入</div>
  3.     <div class="down_up">从下往上透明切入</div>
  4.     <div class="right_left">从右往左透明切入</div>
  5.     <div class="left_right">从左往右透明切入</div>
  6.     <div class="opacityan">透明进入</div>
  7.     <div class="rotatean">旋转</div>
  8.     <div class="scale_rotate">缩放透明入场</div>
  9.     <div class="flip_warp">
  10.         <div class="flip">3D翻转</div>
  11.     </div>
  12.     <div class="watering_opean">
  13.         <div class="watering"></div>
  14.     </div>
  15. </div>

公用css代码

  1. #wrap {
  2.     width: 640px;
  3.     overflow: hidden;
  4. }
  5. #wrap > div {
  6.     width: 100%;
  7.     height: 86px;
  8.     line-height: 86px;
  9.     font-size: 30px;
  10.     text-align: center;
  11.     opacity: 0;
  12. }

1，从左往右透明切入

  2. @-webkit-keyframes lran {
  3.     0% {
  4.         -webkit-transform: translateX(-100%);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: translateX(0);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes lran {
  14.     0% {
  15.         transform: translateX(-100%);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: translateX(0);
  20.         opacity: 1;
  21.     }
  22. }
  24. .left_right {
  25.     background: gray;
  26.     -webkit-animation: lran 0.6s 1 1.8s forwards;
  27.     animation: lran 0.6s 1 1.8s forwards;
  28. }

2，从右往左透明切入

  2. @-webkit-keyframes rlan {
  3.     0% {
  4.         -webkit-transform: translateX(100%);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: translateX(0);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes rlan {
  14.     0% {
  15.         transform: translateX(100%);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: translateX(0);
  20.         opacity: 1;
  21.     }
  22. }
  23. .right_left {
  24.     background: green;
  25.     -webkit-animation: rlan 0.6s 1 1.2s forwards;
  26.     animation: rlan 0.6s 1 1.2s forwards;
  27. }

3，从下往上透明切入

  2. @-webkit-keyframes btan {
  3.     0% {
  4.         -webkit-transform: translateY(100%);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: translateY(0);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes btan {
  14.     0% {
  15.         transform: translateY(100%);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: translateY(0);
  20.         opacity: 1;
  21.     }
  22. }
  24. .down_up {
  25.     background: blue;
  26.     -webkit-animation: btan 0.6s 1 0.6s forwards;
  27.     animation: btan 0.6s 1 0.6s forwards;
  28. }

4，从上往下透明切入

  2. @-webkit-keyframes tban {
  3.     0% {
  4.         -webkit-transform: translateY(-100%);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: translateY(0);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes tban {
  14.     0% {
  15.         transform: translateY(-100%);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: translateY(0);
  20.         opacity: 1;
  21.     }
  22. }
  24. .up_down {
  25.     background: red;
  26.     -webkit-animation: tban 0.6s 1 0s forwards;
  27.     animation: tban 0.6s 1 0s forwards;
  28. }

5，旋转动画

  2. @-webkit-keyframes rotaan {
  3.     0% {
  4.         -webkit-transform: rotateZ(0deg);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: rotateZ(360deg);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes rotaan {
  14.     0% {
  15.         transform: rotateZ(0deg);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: rotateZ(360deg);
  20.         opacity: 1;
  21.     }
  22. }
  24. .rotatean {
  25.     background: yellow;
  26.     -webkit-animation: rotaan 0.6s 1 3s forwards;
  27.     animation: rotaan 0.6s 1 3s forwards;
  28. }

6，缩放透明入场

  2. @-webkit-keyframes scalean {
  3.     0% {
  4.         -webkit-transform: scale(5);
  5.         opacity: 0;
  6.     }
  7.     100% {
  8.         -webkit-transform: scale(1);
  9.         opacity: 1;
  10.     }
  11. }
  13. @keyframes scalean {
  14.     0% {
  15.         transform: scale(5);
  16.         opacity: 0;
  17.     }
  18.     100% {
  19.         transform: scale(1);
  20.         opacity: 1;
  21.     }
  22. }
  24. .scale_rotate {
  25.     background: black;
  26.     color: #fff;
  27.     -webkit-animation: scalean 0.6s 1 3.6s forwards;
  28.     animation: scalean 0.6s 1 3.6s forwards;
  29. }

7，透明进入

  2. @-webkit-keyframes opean {
  3.     0% {
  4.         opacity: 0;
  5.     }
  6.     100% {
  7.         opacity: 1;
  8.     }
  9. }
  11. @keyframes opean {
  12.     0% {
  13.         opacity: 0;
  14.     }
  15.     100% {
  16.         opacity: 1;
  17.     }
  18. }
  20. .opacityan {
  21.     background: purple;
  22.     -webkit-animation: opean 0.6s 1 2.4s forwards;
  23.     animation: opean 0.6s 1 2.4s forwards;
  24. }
  26. #wrap .flip_warp {
  27.     -webkit-animation: opean 0.4s 1 4.2s forwards;
  28.     animation: opean 0.4s 1 4.2s forwards;
  29.     -webkit-perspective: 800px;
  30.     perspective: 800px;
  31. }
  33. #wrap .watering_opean {
  34.     width: 328.7px;
  35.     height: 634px;
  36.     position: fixed;
  37.     top: 10px;
  38.     right: 10px;
  39.     -webkit-animation: opean 0.4s 1 5.2s forwards;
  40.     animation: opean 0.4s 1 5.2s forwards;
  41. }

8，3D翻转 ，上下两个有的时候需要结合使用

  2. @-webkit-keyframes flipan {
  3.     0% {
  4.         -webkit-transform: rotateX(-180deg);
  5.     }
  6.     100% {
  7.         -webkit-transform: rotateX(0);
  8.     }
  9. }
  11. @keyframes flipan {
  12.     0% {
  13.         transform: rotateX(-180deg);
  14.     }
  15.     100% {
  16.         transform: rotateX(0);
  17.     }
  18. }
  20. #wrap .flip {
  21.     background: black;
  22.     color: #fff;
  23.     -webkit-transform-style: preserve-3d;
  24.     transform-style: preserve-3d;
  25.     -webkit-transform: rotateX(-180deg);
  26.     transform: rotateX(-180deg);
  27.     -webkit-animation: flipan 0.6s 1 4.4s forwards;
  28.     animation: flipan 0.6s 1 4.4s forwards;
  29. }

9，序列帧动画

  2. @-webkit-keyframes wateringan {
  3.     0% {
  4.         background-position: 0 0;
  5.     }
  6.     100% {
  7.         background-position: -3287px 0;
  8.     }
  9. }
  11. @keyframes wateringan {
  12.     0% {
  13.         background-position: 0 0;
  14.     }
  15.     100% {
  16.         background-position: -3287px 0;
  17.     }
  18. }
  20. #wrap .watering {
  21.     width: 328.7px;
  22.     height: 634px;
  23.     background: url(waterspr.png) no-repeat;
  24.     -webkit-animation: wateringan 1s steps(10, end) 5.6s infinite;
  25.     animation: wateringan 1s steps(10, end) 5.6s infinite;
  26. }

waterspr.png 图片如下：

常用动画 - 图4

waterspr.png

（三），加载（loading）动画

1，进度条+数字展示

常用动画 - 图5

WechatIMG64.jpeg

html

  2. <div class="loading">
  3.     <div class="loading-con" id="loading-line"></div>
  4.     <p class="per-num" id="loading-per">0%</p>
  5. </div>

js

  1.  <script>
  2. var imgarr = [
  3. '[http://himg2.huanqiu.com/attachment2010/2012/0525/20120525042526697.jpg'](http://himg2.huanqiu.com/attachment2010/2012/0525/20120525042526697.jpg'), 
  4. '[http://www.chinanews.com/cr/2015/1119/2634365829.jpg'](http://www.chinanews.com/cr/2015/1119/2634365829.jpg'),               
  5. '[http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'](http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'), 
  6. '[http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'](http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'),              
  7. '[http://www.xinhuanet.com/world/titlepic/111547/1115479659_title0h.jpg'](http://www.xinhuanet.com/world/titlepic/111547/1115479659_title0h.jpg'), 
  8. '[http://www.redjun.com/uploads/allimg/150123/102302G57-4.jpg'](http://www.redjun.com/uploads/allimg/150123/102302G57-4.jpg'),         
  9. '[http://www.gzsrex.com/Uploads/201405/53686507a525b.jpg'](http://www.gzsrex.com/Uploads/201405/53686507a525b.jpg'), 
  10. '[http://pic39.nipic.com/20140316/3344588_235616333189_2.jpg'](http://pic39.nipic.com/20140316/3344588_235616333189_2.jpg') ],
  11. //要加载的图片地址，此处是直接从网上找的，模拟效果用，实现场景要换成真的
  13. loadingL = document.getElementById("loading-line"),   //进度条
  14. loadingPer = document.getElementById("loading-per");   //进度值   
  16. //改变进度函数
  17. function changefn(num) {
  18.     loadingL.style.width = num + '%';     
  19.     loadingPer.innerHTML = num + '%';   
  20. }
  22. function loadingfn() {
  23.     var imgo = new Image(),//图像对象
  24.     imglen = imgarr.length - 1,
  25.     count = 0,
  26.     pernum = 0;
  27.     imgo.src = imgarr[count];
  28.     imgo.onload = function () {
  29.         count++;
  30.         pernum = parseInt(count / imglen * 100);
  31.         changefn(pernum);
  32.         if (count == imglen) {
  33.             //这里执行页面初始化工作
  34.             alert('图片加载完成喽！可以进入初始化')
  35.             return;
  36.         }           
  37.         this.src = imgarr[count];
  38.     };
  39.     imgo.onerror = function() {
  40.         //这里执行页面初始化工作
  41.         alert('图片出错直接加载完成喽！可以进入初始化')
  42.     };
  43. }
  44. loadingfn();
  45. </script>

css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. .loading {
  6.     width: 80%;
  7.     height: 36px;
  8.     background: #999;
  9.     position: absolute;
  10.     top: 50%;
  11.     left: 50%;
  12.     transform: translate(-50%, -50%);
  13.     overflow: hidden;
  14.     border-radius: 5px;
  15. }
  17. .loading-con {
  18.     width: 0;
  19.     height: 36px;
  20.     background: green;
  21. }
  23. .per-num {
  24.     width: 100%;
  25.     height: 36px;
  26.     line-height: 36px;
  27.     text-align: center;
  28.     color: #fff;
  29.     font-size: 24px;
  30.     position: absolute;
  31.     top: 0;
  32.     left: 0;
  33. }

2，条形元素循环动画展示

常用动画 - 图6

WechatIMG61.jpeg

html

  1. <div class="spinner1">
  2.     <div class="rect1"></div>
  3.     <div class="rect2"></div>
  4.     <div class="rect3"></div>
  5.     <div class="rect4"></div>
  6.     <div class="rect5"></div>
  7. </div>

css

  1. .spinner1 {
  2.     margin: 100px auto;
  3.     width: 50px;
  4.     height: 60px;
  5.     text-align: center;
  6.     font-size: 10px;
  7.     border: 1px solid #eaeaea;
  8. }
  10. .spinner1 > div {
  11.     background-color: #67CF22;
  12.     height: 100%;
  13.     width: 6px;
  14.     display: inline-block;
  16.     -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  17.     animation: stretchdelay 1.2s infinite ease-in-out;
  18. }
  20. .spinner1 .rect2 {
  21.     -webkit-animation-delay: -1.1s;
  22.     animation-delay: -1.1s;
  23. }
  25. .spinner1 .rect3 {
  26.     -webkit-animation-delay: -1.0s;
  27.     animation-delay: -1.0s;
  28. }
  30. .spinner1 .rect4 {
  31.     -webkit-animation-delay: -0.9s;
  32.     animation-delay: -0.9s;
  33. }
  35. .spinner1 .rect5 {
  36.     -webkit-animation-delay: -0.8s;
  37.     animation-delay: -0.8s;
  38. }
  40. @-webkit-keyframes stretchdelay {
  41.     0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  42.     20% { -webkit-transform: scaleY(1.0) }
  43. }
  45. @keyframes stretchdelay {
  46.     0%, 40%, 100% {
  47.         transform: scaleY(0.4);
  48.         -webkit-transform: scaleY(0.4);
  49.     }  20% {
  50.            transform: scaleY(1.0);
  51.            -webkit-transform: scaleY(1.0);
  52.        }
  53. }

3，圆形并排三个缩放动画展示

常用动画 - 图7

WechatIMG60.jpeg

html

  1. <div class="spinner">  
  2.   <div class="bounce1"></div>
  3.   <div class="bounce2"></div>
  4.   <div class="bounce3"></div>
  5. </div>

css

  1. .spinner {  margin: 100px auto 0;
  2.   width: 150px;
  3.   text-align: center;
  4. }
  6. .spinner > div {
  7.   width: 30px;
  8.   height: 30px;
  9.   background-color: #67CF22;
  11.   border-radius: 100%;
  12.   display: inline-block;
  13.   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  14.   animation: bouncedelay 1.4s infinite ease-in-out;
  16.   -webkit-animation-fill-mode: both;
  17.   animation-fill-mode: both;
  18. }
  20. .spinner .bounce1 {
  21.   -webkit-animation-delay: -0.32s;
  22.   animation-delay: -0.32s;
  23. }
  25. .spinner .bounce2 {
  26.   -webkit-animation-delay: -0.16s;
  27.   animation-delay: -0.16s;
  28. }
  30. @-webkit-keyframes bouncedelay {
  31.   0%, 80%, 100% { -webkit-transform: scale(0.0) }
  32.   40% { -webkit-transform: scale(1.0) }
  33. }
  35. @keyframes bouncedelay {
  36.   0%, 80%, 100% {
  37.     transform: scale(0.0);
  38.     -webkit-transform: scale(0.0);
  39.   } 40% {
  40.     transform: scale(1.0);
  41.     -webkit-transform: scale(1.0);
  42.   }
  43. }

4，圆形环绕大圆旋转动画展示

常用动画 - 图8

WechatIMG62.jpeg

html

  2. <div class="spinner">
  3.   <div class="spinner-container container1">
  4.     <div class="circle1"></div>
  5.     <div class="circle2"></div>
  6.     <div class="circle3"></div>
  7.     <div class="circle4"></div>
  8.   </div>
  9.   <div class="spinner-container container2">
  10.     <div class="circle1"></div>
  11.     <div class="circle2"></div>
  12.     <div class="circle3"></div>
  13.     <div class="circle4"></div>
  14.   </div>
  15.   <div class="spinner-container container3">
  16.     <div class="circle1"></div>
  17.     <div class="circle2"></div>
  18.     <div class="circle3"></div>
  19.     <div class="circle4"></div>
  20.   </div>
  21. </div>

css

  1. .spinner {  margin: 100px auto;
  2.   width: 20px;
  3.   height: 20px;
  4.   position: relative;
  5. }
  7. .container1 > div, .container2 > div, .container3 > div {
  8.   width: 6px;
  9.   height: 6px;
  10.   background-color: #333;
  12.   border-radius: 100%;
  13.   position: absolute;
  14.   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  15.   animation: bouncedelay 1.2s infinite ease-in-out;
  16.   -webkit-animation-fill-mode: both;
  17.   animation-fill-mode: both;
  18. }
  20. .spinner .spinner-container {
  21.   position: absolute;
  22.   width: 100%;
  23.   height: 100%;
  24. }
  26. .container2 {
  27.   -webkit-transform: rotateZ(45deg);
  28.   transform: rotateZ(45deg);
  29. }
  31. .container3 {
  32.   -webkit-transform: rotateZ(90deg);
  33.   transform: rotateZ(90deg);
  34. }
  36. .circle1 { top: 0; left: 0; }
  37. .circle2 { top: 0; right: 0; }
  38. .circle3 { right: 0; bottom: 0; }
  39. .circle4 { left: 0; bottom: 0; }
  41. .container2 .circle1 {
  42.   -webkit-animation-delay: -1.1s;
  43.   animation-delay: -1.1s;
  44. }
  46. .container3 .circle1 {
  47.   -webkit-animation-delay: -1.0s;
  48.   animation-delay: -1.0s;
  49. }
  51. .container1 .circle2 {
  52.   -webkit-animation-delay: -0.9s;
  53.   animation-delay: -0.9s;
  54. }
  56. .container2 .circle2 {
  57.   -webkit-animation-delay: -0.8s;
  58.   animation-delay: -0.8s;
  59. }
  61. .container3 .circle2 {
  62.   -webkit-animation-delay: -0.7s;
  63.   animation-delay: -0.7s;
  64. }
  66. .container1 .circle3 {
  67.   -webkit-animation-delay: -0.6s;
  68.   animation-delay: -0.6s;
  69. }
  71. .container2 .circle3 {
  72.   -webkit-animation-delay: -0.5s;
  73.   animation-delay: -0.5s;
  74. }
  76. .container3 .circle3 {
  77.   -webkit-animation-delay: -0.4s;
  78.   animation-delay: -0.4s;
  79. }
  81. .container1 .circle4 {
  82.   -webkit-animation-delay: -0.3s;
  83.   animation-delay: -0.3s;
  84. }
  86. .container2 .circle4 {
  87.   -webkit-animation-delay: -0.2s;
  88.   animation-delay: -0.2s;
  89. }
  91. .container3 .circle4 {
  92.   -webkit-animation-delay: -0.1s;
  93.   animation-delay: -0.1s;
  94. }
  96. @-webkit-keyframes bouncedelay {
  97.   0%, 80%, 100% { -webkit-transform: scale(0.0) }
  98.   40% { -webkit-transform: scale(1.0) }
  99. }
  101. @keyframes bouncedelay {
  102.   0%, 80%, 100% {
  103.     transform: scale(0.0);
  104.     -webkit-transform: scale(0.0);
  105.   } 40% {
  106.     transform: scale(1.0);
  107.     -webkit-transform: scale(1.0);
  108.   }
  109. }