1.transition属性:

transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timing-function,and transition-delay。
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
默认值:all 0 ease 0
js语法: object.style.transition = "width 2s";
transition-property: 指定CSS属性的name,transition效果

transition-duration: transition效果需要指定多少秒或毫秒才能完成

transition-timing-function: 指定transition效果的转速曲线

transition-delay: 定义transition效果开始的时候

例子:

  1. div
  2. {
  3. width:100px;
  4. height:100px;
  5. background:red;
  6. transition:transform 1s ease 1s;
  7. -webkit-transition:transform 2s ease 1s;
  8. }
  9.  
  10. div:hover
  11. {
  12. transform:translate(200px, 0px);
  13. }

当鼠标移在div上,1s延迟后,div向右以ease方式,在2s内,移动200px。

还有transition属性的分解写法:

  1. <style>
  2. div
  3. {
  4. width:100px;
  5. height:100px;
  6. background:red;
  7. transition-property:width;
  8. transition-duration:2s;
  9. transition-delay:2s;
  10. transition-timing-function: ease;
  11.  
  12. /* Safari/Chrome */
  13. -webkit-transition-property:width;
  14. -webkit-transition-duration:2s;
  15. -webkit-transition-delay:2s;
  16. -webkit-transition-timing-function: ease;
  17. }
  18.  
  19. div:hover
  20. {
  21. width:300px;
  22. }
  23. </style>

注意:

该属性不兼容IE9以及更早版本的浏览器;

该过度效果开始前会停顿2s;

transition-timing-function属性值:属性指定切换效果的速度;此属性允许一个过渡效果,以改变其持续时间的速度;默认值ease;
描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

关于这几个速度的例子,看下面:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>transaction</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .trans_box {
  9. padding: 20px;
  10. background-color: #f0f3f9;
  11. width: 800px;
  12. }
  13. .trans_list {
  14. width: 10%;
  15. height: 64px;
  16. margin:10px 0;
  17. background-color:#486AAA;
  18. color:#fff;
  19. text-align:center;
  20. }
  21. .ease {
  22. -webkit-transition: all 4s ease;
  23. -moz-transition: all 4s ease;
  24. -o-transition: all 4s ease;
  25. transition: all 4s ease;
  26. }
  27. .ease_in {
  28. -webkit-transition: all 4s ease-in;
  29. -moz-transition: all 4s ease-in;
  30. -o-transition: all 4s ease-in;
  31. transition: all 4s ease-in;
  32. }
  33. .ease_out {
  34. -webkit-transition: all 4s ease-out;
  35. -moz-transition: all 4s ease-out;
  36. -o-transition: all 4s ease-out;
  37. transition: all 4s ease-out;
  38. }
  39. .ease_in_out {
  40. -webkit-transition: all 4s ease-in-out;
  41. -moz-transition: all 4s ease-in-out;
  42. -o-transition: all 4s ease-in-out;
  43. transition: all 4s ease-in-out;
  44. }
  45. .linear {
  46. -webkit-transition: all 4s linear;
  47. -moz-transition: all 4s linear;
  48. -o-transition: all 4s linear;
  49. transition: all 4s linear;
  50. }
  51. .trans_box:hover .trans_list{
  52. margin-left: 89%;
  53. background-color: #beceeb;
  54. color: #333;
  55. -webkit-border-radius: 25px;
  56. -moz-border-radius: 25px;
  57. -o-border-radius: 25px;
  58. border-radius: 25px;
  59. -webkit-transform: rotate(360deg);
  60. -moz-transform: rotate(360deg);
  61. -o-transform: rotate(360deg);
  62. transform: rotate(360deg);
  63. }
  64.  
  65. </style>
  66. </head>
  67. <body>
  68. <div id="transBox" class="trans_box">
  69. <div class="trans_list ease">ease</div>
  70. <div class="trans_list ease_in">ease-in</div>
  71. <div class="trans_list ease_out">ease-out</div>
  72. <div class="trans_list ease_in_out">ease-in-out</div>
  73. <div class="trans_list linear">linear</div>
  74. </div>
  75.  
  76. </body>
  77. <script src="jquery/jquery.min.js"></script>
  78. <script src="bootstrap/bootstrap.min.js"></script>
  79. <script type="text/javascript">
  80.  
  81. </script>
  82. </html>

二、transform
transform指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。见下面示例代码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>transform</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin-top: 100px;
  11. }
  12. .trans_box {
  13. display: inline-block;
  14. margin: 10px;
  15. padding: 20px 10px;
  16. border: 1px solid #beceeb;
  17. background-color: #f0f3f9;
  18. }
  19. .trans_skew {
  20. -moz-transform: skew(35deg);
  21. -webkit-transform: skew(35deg);
  22. -o-transform: skew(35deg);
  23. transform: skew(35deg);
  24. }
  25. .trans_scale {
  26. -moz-transform: scale(1,0.5);
  27. -webkit-transform: scale(1,0.5);
  28. -o-transform: scale(1,0.5);
  29. transform: scale(1,0.5);
  30. }
  31. .trans_rotate {
  32. -moz-transform: rotate(45deg);
  33. -webkit-transform: rotate(45deg);
  34. -o-transform: rotate(45deg);
  35. transform: rotate(45deg);
  36. }
  37. .trans_translate {
  38. -moz-transform: translate(10px, 20px);
  39. -webkit-transform: translate(10px, 20px);
  40. -o-transform: translate(10px, 20px);
  41. transform: translate(10px, 20px);
  42. }
  43. .trans_rotate_skew_scale_translate {
  44. -moz-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
  45. -webkit-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
  46. -o-transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
  47. transform: skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="demo">
  53. <span class="trans_box trans_skew">transform: skew(35deg);</span>
  54. <span class="trans_box trans_scale">transform:scale(1,0.5);</span>
  55. <span class="trans_box trans_rotate">transform:rotate(45deg);</span>
  56. <span class="trans_box trans_translate">transform:translate(10px, 20px);</span>
  57. <span class="trans_box trans_rotate_skew_scale_translate">transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);</span>
  58. </div>
  59.  
  60. </body>
  61. <script src="jquery/jquery.min.js"></script>
  62. <script src="bootstrap/bootstrap.min.js"></script>
  63. <script type="text/javascript">
  64.  
  65. </script>
  66. </html>

属性解释:
translate: 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数;
     值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
 
rotate:      通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
           值 rotate(30deg) 把元素顺时针旋转 30 度。
 
scale:      通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:
         值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
 
skew:     通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
         值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
 
transform属性要是加上transition的过渡特性,那可就是如虎添翼:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>transform</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin-top: 100px;
  11. }
  12. .trans_effect {
  13. display: block;
  14. line-height: 100px;
  15. width: 100px;
  16. background: #beceeb;
  17. margin: 30px auto;
  18. text-align: center;
  19. -webkit-transition: all 2s ease-in-out;
  20. -moz-transition: all 2s ease-in-out;
  21. -o-transition: all 2s ease-in-out;
  22. -ms-transition: all 2s ease-in-out;
  23. transition: transform 2s ease-in-out;
  24. }
  25. .trans_effect:hover {
  26. -webkit-transform: rotate(720deg) scale(2,2);
  27. -moz-transform: rotate(720deg) scale(2,2);
  28. -o-transform: rotate(720deg) scale(2,2);
  29. -ms-transform: rotate(720deg) scale(2,2);
  30. transform: rotate(720deg) scale(2,2);
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="demo">
  36. <div class="trans_effect">look</div>
  37. </body>
  38. <script src="jquery/jquery.min.js"></script>
  39. <script src="bootstrap/bootstrap.min.js"></script>
  40. <script type="text/javascript">
  41.  
  42. </script>
  43. </html>

三、animation

animation 属性是一个简写属性,用于设置六个动画属性:
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
语法:
  1. animation: name duration timing-function delay iteration-count direction;

animation-name: 规定需要绑定到选择器的 keyframe 名称。

animation-duration: 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function: 规定动画的速度曲线。

animation-delay: 规定在动画开始之前的延迟。

animation-iteration-count: 规定动画应该播放的次数。

animation-direction: 规定是否应该轮流反向播放动画。

CSS3 @keyframes 规则

浏览器支持情况:

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 infinite 无限; 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

alternate 反向播放;
3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

下面是例子使用:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>transform</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin-top: 100px;
  11. }
  12. #animated_div {
  13. width: 80px;
  14. height: 60px;
  15. background: #92B901;
  16. color: #ffffff;
  17. position: relative;
  18. font-weight: bold;
  19. font-size: 12px;
  20. padding: 20px 10px 0px 10px;
  21. animation: animated_div 5s infinite alternate;
  22. -moz-animation: animated_div 5s infinite alternate;
  23. -webkit-animation: animated_div 5s infinite alternate;
  24. -o-animation: animated_div 5s infinite alternate;
  25. border-radius: 5px;
  26. -webkit-border-radius: 5px;
  27. }
  28. @keyframes animated_div{
  29. 0% {transform: rotate(0deg);left: 0px;}
  30. 25% {transform: rotate(20deg);left: 0px;}
  31. 50% {transform: rotate(0deg);left: 500px;}
  32. 55% {transform: rotate(0deg);left: 500px;}
  33. 70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
  34. 100% {transform: rotate(-360deg);left: 0px;}
  35. }
  36. @-moz-keyframes animated_div{ /* Firefox */
  37. 0% {transform: rotate(0deg);left: 0px;}
  38. 25% {transform: rotate(20deg);left: 0px;}
  39. 50% {transform: rotate(0deg);left: 500px;}
  40. 55% {transform: rotate(0deg);left: 500px;}
  41. 70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
  42. 100% {transform: rotate(-360deg);left: 0px;}
  43. }
  44. @-webkit-keyframes animated_div{ /* Safari and Chrome */
  45. 0% {transform: rotate(0deg);left: 0px;}
  46. 25% {transform: rotate(20deg);left: 0px;}
  47. 50% {transform: rotate(0deg);left: 500px;}
  48. 55% {transform: rotate(0deg);left: 500px;}
  49. 70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
  50. 100% {transform: rotate(-360deg);left: 0px;}
  51. }
  52. @-o-keyframes animated_div{ /* Opera */
  53. 0% {transform: rotate(0deg);left: 0px;}
  54. 25% {transform: rotate(20deg);left: 0px;}
  55. 50% {transform: rotate(0deg);left: 500px;}
  56. 55% {transform: rotate(0deg);left: 500px;}
  57. 70% {transform: rotate(0deg);left: 500px;background: #1ec7e6;}
  58. 100% {transform: rotate(-360deg);left: 0px;}
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div class="demo">
  64. <p id="animated_div">CSS3 动画</p>
  65. </div>
  66.  
  67. </body>
  68. <script src="jquery/jquery.min.js"></script>
  69. <script src="bootstrap/bootstrap.min.js"></script>
  70. <script type="text/javascript">
  71.  
  72. </script>
  73. </html>

=====================================下面是例子  有些是摘抄的================================================

例子1:头像照片发光:

animations不仅适用于CSS2中的属性,CSS3也是支持的,例如box-shadow盒阴影效果,所以,我们可以实现外发光效果的。使用过web qq的人应该有印象,当鼠标移到聊天对象脑袋上的时候会有蓝色外发光的动画,但是那是gif动画图片实现的(现在自动跳转到web qq 2.0已看不到效果)。但是gif的重用性有限而且制作破费功夫,如果简单几行CSS代码就可以实现高性能高扩展的效果岂不更加,现在animations就可以搞定这一些。

例子:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>照片外发光动画demo</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin: 100px 0 0 100px;
  11. }
  12. .anim_image {
  13. padding: 3px;
  14. border: 1px solid #beceeb;
  15. background-color: white;
  16. -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
  17. -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
  18. box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
  19. }
  20. .anim_image:hover {
  21. background-color: #f0f3f9;
  22. -webkit-animation-name: glow;
  23. -webkit-animation-duration: 1s;
  24. -webkit-animation-iteration-count: infinite;
  25. -webkit-animation-direction: alternate;
  26. -webkit-animation-timing-function: ease-in-out;
  27. }
  28. @-webkit-keyframes glow {
  29. 0% {
  30. -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
  31. border-color: rgba(160, 179, 214, 0.5);
  32. }
  33. 100% {
  34. -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
  35. border-color: rgba(160, 179, 214, 1.0);
  36. }
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div class="demo">
  42. <img class="anim_image" src="data:images/head14.jpg">
  43. </div>
  44.  
  45. </body>
  46. <script src="jquery/jquery.min.js"></script>
  47. <script src="bootstrap/bootstrap.min.js"></script>
  48. <script type="text/javascript">
  49.  
  50. </script>
  51. </html>

例子2:图片轮转缩放显示动画demo

下面这个实例是与图片位置,比例尺寸挂钩的,聪明的你是不是想到了transform属性呢。对的,transform+tranisition,双剑合璧,天下无敌。下面这个效果是很酷很酷的,以前基本上只能在Flash中可以看到。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>图片轮转缩放显示动画demo</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin: 100px 0 0 100px;
  11. }
  12. .anim_box {
  13. width: 200px;
  14. cursor: pointer;
  15. }
  16. .anim_image {
  17. -webkit-transition: all 1s ease-in-out;
  18. -moz-transition: all 1s ease-in-out;
  19. -o-transition: all 1s ease-in-out;
  20. transition: all 1s ease-in-out;
  21. cursor:pointer;
  22. }
  23. .anim_image_top {
  24. position: absolute;
  25. -webkit-transform: scale(0, 0);
  26. opacity: 0;
  27. filter: Alpha(opacity=0);
  28. }
  29. .anim_box:hover .anim_image_top{
  30. opacity: 1;
  31. filter: Alpha(opacity=100);
  32. -webkit-transform: scale(1, 1);
  33. -webkit-transform-origin: top right;
  34. }
  35. .anim_box:hover .anim_image_bottom{
  36. -webkit-transform: scale(0, 0);
  37. -webkit-transform-origin: bottom left;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="demo">
  43. <div id="testBox" class="demo anim_box">
  44. <img class="anim_image anim_image_top" src="data:images/ps6.jpg">
  45. <img class="anim_image anim_image_bottom" src="data:images/ps4.jpg">
  46. </div>
  47. </div>
  48.  
  49. </body>
  50. <script src="jquery/jquery.min.js"></script>
  51. <script src="bootstrap/bootstrap.min.js"></script>
  52. <script type="text/javascript">
  53.  
  54. </script>
  55. </html>

transform-origin:
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
默认值:50% 50% 0
语法:
  1. transform-origin: x-axis y-axis z-axis;
x-axis:
定义视图被置于 X 轴的何处。可能的值:
  • left
  • center
  • right
  • length
  • %
y-axis:
定义视图被置于 Y 轴的何处。可能的值:
  • top
  • center
  • bottom
  • length
  • %
z-axis:
定义视图被置于 Z 轴的何处。可能的值:
  • length

例子3:选项卡切换

我们平时的选项卡切换基本上都是很生硬的,直接啪啪啪,切换过来了,没有点过渡啊什么的(毕竟写JavaScript动画成本较高),现在,有了transitions,实现过渡效果就是几行CSS代码的事情,不多说了,直接上实例。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>平滑选项卡切换demo</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7. <style type="text/css">
  8. .demo {
  9. padding: 10px;
  10. margin: 100px 0 0 100px;
  11. }
  12. .trans_image_box {
  13. width: 1600px;
  14. height: 300px;
  15. -webkit-transition: all 1s ease-in-out;
  16. -moz-transition: all 1s ease-in-out;
  17. -o-transition: all 1s ease-in-out;
  18. transition: all 1s ease-in-out;
  19. }
  20. .trans_box {
  21. width: 400px;
  22. margin: 20px;
  23. overflow: hidden;
  24. }
  25. .trans_image {
  26. width: 400px;
  27. float: left;
  28. }
  29. .trans_image_trigger {
  30. padding-top: 10px;
  31. text-align: center;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="demo">
  37.  
  38. <div class="trans_box">
  39. <div id="transImageBox" class="trans_image_box">
  40. <img class="trans_image" src="data:images/ps1.jpg">
  41. <img class="trans_image" src="data:images/ps2.jpg">
  42. <img class="trans_image" src="data:images/ps3.jpg">
  43. <img class="trans_image" src="data:images/ps4.jpg">
  44. </div>
  45. <div id="transImageTrigger" class="trans_image_trigger">
  46. <a href="#1">图片1</a> 
  47. <a href="#2">图片2</a> 
  48. <a href="#3">图片3</a> 
  49. <a href="#4">图片4</a>
  50. </div>
  51. </div>
  52.  
  53. </div>
  54. </body>
  55. <script src="jquery/jquery.min.js"></script>
  56. <script src="bootstrap/bootstrap.min.js"></script>
  57. <script type="text/javascript">
  58. (function() {
  59. var $ = function(id) {
  60. return document.getElementById(id);
  61. };
  62. var oBox = $("transImageBox"),
  63. oTrigger = $("transImageTrigger").getElementsByTagName("a"),
  64. lTrigger = oTrigger.length;
  65.  
  66. if (oBox && lTrigger) {
  67. for (var i = 0; i<lTrigger; i+=1) {
  68. oTrigger[i].onclick = function() {
  69. var index = Number(this.href.replace(/.*#/g, "")) || 1;
  70. oBox.style.marginLeft = (1 - index) * 400 + "px";
  71. return false;
  72. };
  73. }
  74. }
  75. })();
  76. </script>
  77. </html>

CSS其作用的就是那个值以all开头的transition属性;

这里点击控制transImageBox的margin-left,而由于transition对all都有效果,所以改变margin-left也是有动画效果的;

只要是CSS值变换的,只要是额外有transition属性设置的,都是平滑效果,都是动画。

-------------

css transition transform animation例子讲解的更多相关文章

  1. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  4. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  5. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  6. css3实践之图片轮播(Transform,Transition和Animation)

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  7. 区别Transform、Transition、Animation

    另一篇参考文章:http://www.7755.me/Article/CSS3/39/ 近来上班之外就是研究研究CSS动画,下面是第一阶段总结.话说为加强记忆,实则想抛砖引玉!   标题直译一下就是: ...

  8. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  9. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

随机推荐

  1. 比较强大 优秀的开源框架 :Android图片加载与缓存:Android Glide 的用法

    使用Android Glide,需要先下载Android Glide的库,Android Glide在github上的项目主页: https://github.com/bumptech/glide . ...

  2. 冒泡排序(Bubble Sort),比较次数优化改进

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  3. Alpha阶段项目复审

    队名 优点 缺点 名次 大马猴队 出现BUG修复时间短:针对初期用户需求的分析缺点能够快速更正,针对用户痛点实现了功能:开发的过程中削减了无用的功能,源代码管理比较好,更改能够及时提交,相关成员都有参 ...

  4. ORM与hibernate概述

    JDBC是什么? JDBC代表java数据库连接,并提供一组java API,用于java成许访问关系数据库.这些Java的API允许Java程序执行SQL语句,并与任何SQL兼容的数据库进行交互. ...

  5. myeclipse10 破解版安装

    安装包请看百度云: step1 step2 step3 step4 step5 step6 安装 svn,可以参考: http://www.cnblogs.com/OnlyCT/p/6061134.h ...

  6. srtvlet filter

    Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时候,有时候发一些敏感的信息,发出后显示时 就会将敏感信息用*等字符替代,这就是用过滤器对信息进行 ...

  7. php 递归调用又一种方法

     public static function encodeXml($data){        $attr = $xml = "";        foreach($data a ...

  8. Osmocom-bb系统编译

    Ubuntu 12.04.5 LTS i386环境下编译 sudu su --------------------------------------------------------------- ...

  9. 等比例缩放图片(C#)

    private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Drawing.Image  ...

  10. diary of django

    1.安装django -> pip install django ----- 某些时候竟然需要FQ 2.JsonResponse 需要    (不需要了,django.http自带) pip i ...