个人总结（css3 新特性）上

Posted SegmentFault

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了个人总结（css3 新特性）上相关的知识，希望对你有一定的参考价值。

1.前言

css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。

写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！

看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。

2.过渡

过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！

引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

2-1语法

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

栗子1

 
   
   
 
    
  
    
    
  
  1. /*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
    2. 
  
    
    
  
  2. transition：width,.5s,ease,.2s
    3.

栗子2

 
   
   
 
    
  
    
    
  
  1. /*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
    2. 
  
    
    
  
  2. transition：all,.5s
    3.

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

 
   
   
 
    
  
    
    
  
  1. transition-property: width;
    2. 
  
    
    
  
    3. 
  
    
    
  
  3. transition-duration: 1s;
    4. 
  
    
    
  
    5. 
  
    
    
  
  5. transition-timing-function: linear;
    6. 
  
    
    
  
    7. 
  
    
    
  
  7. transition-delay: 2s;
    8.

2-2实例-hover效果

上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。

 当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码 transition:all.5s;

2-3实例-下拉菜单

个人总结（css3 新特性）上

上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡 .ul-transition ul{transform-origin:00;transition:all.5s;}

可能大家不知道我在说什么！我贴下代码吧

html

 
   
   
 
    
  
    
    
  
  1.     <div class="demo-hover demo-ul t_c">
    2. 
  
    
    
  
  2.         <ul class="fllil">
    3. 
  
    
    
  
  3.             <li>
    4. 
  
    
    
  
  4.                 <a href="javascript:;">html</a>
    5. 
  
    
    
  
  5.                 <ul>
    6. 
  
    
    
  
  6.                     <li><a href="#">div</a></li>
    7. 
  
    
    
  
  7.                     <li><a href="#">h1</a></li>
    8. 
  
    
    
  
  8.                 </ul>
    9. 
  
    
    
  
  9.             </li>
    10. 
  
    
    
  
  10.             <li>
    11. 
  
    
    
  
  11.                 <a href="javascript:;">js</a>
    12. 
  
    
    
  
  12.                 <ul>
    13. 
  
    
    
  
  13.                     <li><a href="#">string</a></li>
    14. 
  
    
    
  
  14.                     <li><a href="#">array</a></li>
    15. 
  
    
    
  
  15.                     <li><a href="#">object</a></li>
    16. 
  
    
    
  
  16.                     <li><a href="#">number</a></li>
    17. 
  
    
    
  
  17.                 </ul>
    18. 
  
    
    
  
  18.             </li>
    19. 
  
    
    
  
  19.             <li>
    20. 
  
    
    
  
  20.                 <a href="javascript:;">css3</a>
    21. 
  
    
    
  
  21.                 <ul>
    22. 
  
    
    
  
  22.                     <li><a href="#">transition</a></li>
    23. 
  
    
    
  
  23.                     <li><a href="#">animation</a></li>
    24. 
  
    
    
  
  24.                 </ul>
    25. 
  
    
    
  
  25.             </li>
    26. 
  
    
    
  
  26.             <li>
    27. 
  
    
    
  
  27.                 <a href="javascript:;">框架</a>
    28. 
  
    
    
  
  28.                 <ul>
    29. 
  
    
    
  
  29.                     <li><a href="#">vue</a></li>
    30. 
  
    
    
  
  30.                     <li><a href="#">react</a></li>
    31. 
  
    
    
  
  31.                 </ul>
    32. 
  
    
    
  
  32.             </li>
    33. 
  
    
    
  
  33.         </ul>
    34. 
  
    
    
  
  34.         <div class="clear"></div>
    35. 
  
    
    
  
  35.     </div>
    36. 
  
    
    
  
  36.     <div class="demo-hover demo-ul ul-transition t_c">
    37. 
  
    
    
  
  37.         <ul class="fllil">
    38. 
  
    
    
  
  38.             <li>
    39. 
  
    
    
  
  39.                 <a href="javascript:;">html</a>
    40. 
  
    
    
  
  40.                 <ul>
    41. 
  
    
    
  
  41.                     <li><a href="#">div</a></li>
    42. 
  
    
    
  
  42.                     <li><a href="#">h1</a></li>
    43. 
  
    
    
  
  43.                 </ul>
    44. 
  
    
    
  
  44.             </li>
    45. 
  
    
    
  
  45.             <li>
    46. 
  
    
    
  
  46.                 <a href="javascript:;">js</a>
    47. 
  
    
    
  
  47.                 <ul>
    48. 
  
    
    
  
  48.                     <li><a href="#">string</a></li>
    49. 
  
    
    
  
  49.                     <li><a href="#">array</a></li>
    50. 
  
    
    
  
  50.                     <li><a href="#">object</a></li>
    51. 
  
    
    
  
  51.                     <li><a href="#">number</a></li>
    52. 
  
    
    
  
  52.                 </ul>
    53. 
  
    
    
  
  53.             </li>
    54. 
  
    
    
  
  54.             <li>
    55. 
  
    
    
  
  55.                 <a href="javascript:;">css3</a>
    56. 
  
    
    
  
  56.                 <ul>
    57. 
  
    
    
  
  57.                     <li><a href="#">transition</a></li>
    58. 
  
    
    
  
  58.                     <li><a href="#">animation</a></li>
    59. 
  
    
    
  
  59.                 </ul>
    60. 
  
    
    
  
  60.             </li>
    61. 
  
    
    
  
  61.             <li>
    62. 
  
    
    
  
  62.                 <a href="javascript:;">框架</a>
    63. 
  
    
    
  
  63.                 <ul>
    64. 
  
    
    
  
  64.                     <li><a href="#">vue</a></li>
    65. 
  
    
    
  
  65.                     <li><a href="#">react</a></li>
    66. 
  
    
    
  
  66.                 </ul>
    67. 
  
    
    
  
  67.             </li>
    68. 
  
    
    
  
  68.         </ul>
    69. 
  
    
    
  
  69.         <div class="clear"></div>
    70. 
  
    
    
  
  70.     </div>
    71.

css

 
   
   
 
    
  
    
    
  
  1.     .demo-ul{margin-bottom: 300px;}
    2. 
  
    
    
  
  2.         .demo-ul li{
    3. 
  
    
    
  
  3.             padding: 0 10px;
    4. 
  
    
    
  
  4.             width: 100px;
    5. 
  
    
    
  
  5.             background: #f90;
    6. 
  
    
    
  
  6.             position: relative;
    7. 
  
    
    
  
  7.         }
    8. 
  
    
    
  
  8.         .demo-ul li a{
    9. 
  
    
    
  
  9.             display: block;
    10. 
  
    
    
  
  10.             height: 40px;
    11. 
  
    
    
  
  11.             line-height: 40px;
    12. 
  
    
    
  
  12.             text-align: center;
    13. 
  
    
    
  
  13.         }
    14. 
  
    
    
  
  14.         .demo-ul li ul{
    15. 
  
    
    
  
  15.             position: absolute;
    16. 
  
    
    
  
  16.             width: 100%;
    17. 
  
    
    
  
  17.             top: 40px;
    18. 
  
    
    
  
  18.             left: 0;
    19. 
  
    
    
  
  19.             transform: scaleY(0);
    20. 
  
    
    
  
  20.             overflow: hidden;
    21. 
  
    
    
  
  21.         }
    22. 
  
    
    
  
  22.         .ul-transition ul{
    23. 
  
    
    
  
  23.             transform-origin: 0 0;
    24. 
  
    
    
  
  24.             transition: all .5s;
    25. 
  
    
    
  
  25.         }
    26. 
  
    
    
  
  26.         .demo-ul li:hover ul{
    27. 
  
    
    
  
  27.             transform: scaleY(1);
    28. 
  
    
    
  
  28.         }
    29. 
  
    
    
  
  29.         .demo-ul li ul li{
    30. 
  
    
    
  
  30.             float: none;
    31. 
  
    
    
  
  31.             background: #0099ff;
    32. 
  
    
    
  
    33. 
  
    
    
  
  33.     }
    34.

上面两个可以说是过渡很基础的用法，过渡用法灵活，功能也强大，结合js，可以很轻松实现各种效果（焦点图，手风琴）等，以及很多意想不到的效果。这个靠大家要去挖掘！

3.动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！

3-1.语法

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

栗子1

 
   
   
 
    
  
    
    
  
  1. /*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
    2. 
  
    
    
  
  2. animation: logo2-line 2s linear;
    3.

栗子2

 
   
   
 
    
  
    
    
  
  1. /*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
    2. 
  
    
    
  
  2. animation: logo2-line 2s linear 2s;
    3.

栗子3

 
   
   
 
    
  
    
    
  
  1. /*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
    2. 
  
    
    
  
  2. animation: logo2-line 2s linear alternate infinite;
    3.

还有一个重要属性

animation-fill-mode : none | forwards | backwards | both;

  • none：不改变默认行为。

  • forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

  • backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

  • both：向前和向后填充模式都被应用。

3-2.logo展示动画

个人总结（css3 新特性）上

这个是我用公司logo写的动画，没那么精细

代码如下

 
   
   
 
    
  
    
    
  
  1.     <!DOCTYPE html>
    2. 
  
    
    
  
  2.     <html lang="en">
    3. 
  
    
    
  
  3.     <head>
    4. 
  
    
    
  
  4.         <meta charset="UTF-8">
    5. 
  
    
    
  
  5.         <title>Title</title>
    6. 
  
    
    
  
  6.         <link rel="stylesheet" href="reset.css">
    7. 
  
    
    
  
  7.     </head>
    8. 
  
    
    
  
  8.     <style>
    9. 
  
    
    
  
  9.     .logo-box{
    10. 
  
    
    
  
  10.         width: 600px;
    11. 
  
    
    
  
  11.         margin: 100px auto;
    12. 
  
    
    
  
  12.         font-size: 0;
    13. 
  
    
    
  
  13.         position: relative;
    14. 
  
    
    
  
  14.     }
    15. 
  
    
    
  
  15.     .logo-box div{
    16. 
  
    
    
  
  16.         display: inline-block;
    17. 
  
    
    
  
  17.     }
    18. 
  
    
    
  
  18.     .logo-box .logo-text{
    19. 
  
    
    
  
  19.         margin-left: 10px;
    20. 
  
    
    
  
  20.     }
    21. 
  
    
    
  
  21.     .logo-box .logo1{
    22. 
  
    
    
  
  22.         animation: logo1 1s ease-in 2s;
    23. 
  
    
    
  
  23.         animation-fill-mode:backwards;
    24. 
  
    
    
  
  24.     }
    25. 
  
    
    
  
  25.     .logo-box .logo-text{
    26. 
  
    
    
  
  26.         animation: logoText 1s ease-in 3s;
    27. 
  
    
    
  
  27.         animation-fill-mode:backwards;
    28. 
  
    
    
  
  28.     }
    29. 
  
    
    
  
  29.     .logo-box .logo2{
    30. 
  
    
    
  
  30.         position: absolute;
    31. 
  
    
    
  
  31.         top: 20px;
    32. 
  
    
    
  
  32.         left: 20px;
    33. 
  
    
    
  
  33.         animation: logo2-middle 2s ease-in;
    34. 
  
    
    
  
  34.     }
    35. 
  
    
    
  
  35.     .logo-box .logo2 img{
    36. 
  
    
    
  
  36.         animation: logo2-line 2s linear;
    37. 
  
    
    
  
  37.     }
    38. 
  
    
    
  
  38.     @keyframes logo1 {
    39. 
  
    
    
  
  39.         0%{
    40. 
  
    
    
  
  40.             transform:rotate(180deg);
    41. 
  
    
    
  
  41.             opacity: 0;
    42. 
  
    
    
  
  42.         }
    43. 
  
    
    
  
  43.         100%{
    44. 
  
    
    
  
  44.             transform:rotate(0deg);
    45. 
  
    
    
  
  45.             opacity: 1;
    46. 
  
    
    
  
  46.         }
    47. 
  
    
    
  
  47.     }
    48. 
  
    
    
  
  48.     @keyframes logoText {
    49. 
  
    
    
  
  49.         0%{
    50. 
  
    
    
  
  50.             transform:translateX(30px);
    51. 
  
    
    
  
  51.             opacity: 0;
    52. 
  
    
    
  
  52.         }
    53. 
  
    
    
  
  53.         100%{
    54. 
  
    
    
  
  54.             transform:translateX(0);
    55. 
  
    
    
  
  55.             opacity: 1;
    56. 
  
    
    
  
  56.         }
    57. 
  
    
    
  
  57.     }
    58. 
  
    
    
  
  58.     @keyframes logo2-line {
    59. 
  
    
    
  
  59.         0% { transform: translateX(200px)}
    60. 
  
    
    
  
  60.         25% { transform: translateX(150px)}
    61. 
  
    
    
  
  61.         50% { transform: translateX(100px)}
    62. 
  
    
    
  
  62.         75% { transform: translateX(50px)}
    63. 
  
    
    
  
  63.         100% { transform: translateX(0); }
    64. 
  
    
    
  
  64.     }
    65. 
  
    
    
  
    66. 
  
    
    
  
  66.     @keyframes logo2-middle {
    67. 
  
    
    
  
  67.         0% { transform: translateY(0);     }
    68. 
  
    
    
  
  68.         25% { transform: translateY(-100px);     }
    69. 
  
    
    
  
  69.         50% { transform: translateY(0);     }
    70. 
  
    
    
  
  70.         75% { transform: translateY(-50px);     }
    71. 
  
    
    
  
  71.         100% { transform: translateY(0); }
    72. 
  
    
    
  
  72.     }
    73. 
  
    
    
  
  73.     </style>
    74. 
  
    
    
  
  74.     <body>
    75. 
  
    
    
  
  75.     <div class="logo-box">
    76. 
  
    
    
  
  76.     <div class="logo1"><img src="logo1.jpg"/></div>
    77. 
  
    
    
  
  77.     <div class="logo2"><img src="logo2.jpg"/></div>
    78. 
  
    
    
  
  78.     <div class="logo-text"><img src="logo3.jpg"/></div>
    79. 
  
    
    
  
  79.     </div>
    80. 
  
    
    
  
    81. 
  
    
    
  
  81.     <div class="wraper"><div class="item"></div></div>
    82. 
  
    
    
  
    83. 
  
    
    
  
  83.     </body>
    84. 
  
    
    
  
  84.     </html>
    85.

下面让大家看一个专业级别的

个人总结（css3 新特性）上

3-3.loading效果

个人总结（css3 新特性）上

这个代码实在太多了，大家直接上网址看吧。css3-loading：http://www.html5tricks.com/demo/css3-loading-cool-styles/index.html

3-4.音乐震动条

个人总结（css3 新特性）上

4.形状转换

这一部分，分2d转换和3d转换。有什么好玩的，下面列举几个！

4-1.语法

transform：适用于2D或3D转换的元素 transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)

4-2.实例

 
   
   
 
    
  
    
    
  
  1. transform:rotate(30deg);
    2.


个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform:translate(30px,30px);
    2.


个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform:scale(.8);
    2.


个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform: skew(10deg,10deg);
    2.


个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform:rotateX(180deg);
    2.

个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform:rotateY(180deg);
    2.

个人总结（css3 新特性）上


 
   
   
 
    
  
    
    
  
  1. transform:rotate3d(10,10,10,90deg);
    2.

个人总结（css3 新特性）上

5.选择器

css3提供的选择器可以让我们的开发，更加方便！这个大家都要了解。下面是css3提供的选择器。

个人总结（css3 新特性）上

图片来自w3c。这一块建议大家去w3c看（CSS 选择器参考手册），那里的例子通俗易懂。我不重复讲了。 提供的选择器里面，基本都挺好用的。但是我觉得有些不会很常用，比如， :root，:empty，:target，:enabled，:checked。而且几个不推荐使用，网上的说法是性能较差 [attribute*=value]，[attribute$=value]，[attribute^=value]，这个我没用过，不太清楚。

6.阴影

以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！

6-1.语法

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

6-1.栗子

 
   
   
 
    
  
    
    
  
  1.     <!DOCTYPE html>
    2. 
  
    
    
  
  2.     <html>
    3. 
  
    
    
  
  3.     <head>
    4. 
  
    
    
  
  4.     <meta charset="utf-8"> 
    5. 
  
    
    
  
  5.     <title></title> 
    6. 
  
    
    
  
  6.     <style> 
    7. 
  
    
    
  
  7.     div
    8. 
  
    
    
  
  8.     {
    9. 
  
    
    
  
  9.         width:300px;
    10. 
  
    
    
  
  10.         height:100px;
    11. 
  
    
    
  
  11.         background:#09f;
    12. 
  
    
    
  
  12.         box-shadow: 10px 10px 5px #888888;
    13. 
  
    
    
  
  13.     }
    14. 
  
    
    
  
  14.     </style>
    15. 
  
    
    
  
  15.     </head>
    16. 
  
    
    
  
  16.     <body>
    17. 
  
    
    
  
    18. 
  
    
    
  
  18.     <div></div>
    19. 
  
    
    
  
    20. 
  
    
    
  
  20.     </body>
    21. 
  
    
    
  
  21.     </html>
    22.

运行效果

个人总结（css3 新特性）上

7.边框

7-1.边框图片

7-1-1.语法

border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

7-1-2.栗子

边框图片（来自菜鸟教程）

个人总结（css3 新特性）上

代码

 
   
   
 
    
  
    
    
  
  1.     <!DOCTYPE html>
    2. 
  
    
    
  
  2.     <html>
    3. 
  
    
    
  
  3.     <head>
    4. 
  
    
    
  
  4.     <meta charset="utf-8">
    5. 
  
    
    
  
  5.     <title></title>
    6. 
  
    
    
  
  6.     <style>
    7. 
  
    
    
  
  7.     .demo {
    8. 
  
    
    
  
  8.         border: 15px solid transparent;
    9. 
  
    
    
  
  9.         padding: 15px;   
    10. 
  
    
    
  
  10.         border-image: url(border.png);
    11. 
  
    
    
  
  11.         border-image-slice: 30;
    12. 
  
    
    
  
  12.         border-image-repeat: round;
    13. 
  
    
    
  
  13.         border-image-outset: 0;
    14. 
  
    
    
  
  14.     }
    15. 
  
    
    
  
  15.     </style>
    16. 
  
    
    
  
  16.     </head>
    17. 
  
    
    
  
  17.     <body>
    18. 
  
    
    
  
  18.         <div class="demo"></div>
    19. 
  
    
    
  
  19.     </body>
    20. 
  
    
    
  
  20.     </html>
    21.

效果

个人总结（css3 新特性）上

有趣变化

个人总结（css3 新特性）上

个人总结（css3 新特性）上

那个更好看，大家看着办

7-2.边框圆角

7-2-1.语法

border-radius: n1,n2,n3,n4; border-radius: n1,n2,n3,n4/n1,n2,n3,n4; /n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。/

7-2-2.栗子

 
   
   
 
    
  
    
    
  
  1.     <!DOCTYPE html>
    2. 
  
    
    
  
  2.     <html>
    3. 
  
    
    
  
  3.     <head>
    4. 
  
    
    
  
  4.     <meta charset="utf-8"> 
    5. 
  
    
    
  
  5.     <title></title> 
    6. 
  
    
    
  
  6.     <style> 
    7. 
  
    
    
  
  7.     div
    8. 
  
    
    
  
  8.     {
    9. 
  
    
    
  
  9.         border:2px solid #a1a1a1;
    10. 
  
    
    
  
  10.         padding:10px 40px; 
    11. 
  
    
    
  
  11.         background:#dddddd;
    12. 
  
    
    
  
  12.         text-align:center;
    13. 
  
    
    
  
  13.         width:300px;
    14. 
  
    
    
  
  14.         border-radius:25px 0 25px 0;
    15. 
  
    
    
  
  15.     }
    16. 
  
    
    
  
  16.     </style>
    17. 
  
    
    
  
  17.     </head>
    18. 
  
    
    
  
  18.     <body>
    19. 
  
    
    
  
  19.     <div>border-radius</div>
    20. 
  
    
    
  
  20.     </body>
    21. 
  
    
    
  
  21.     </html>
    22.

运行结果

相关文章推荐

以上是关于个人总结（css3 新特性）上的主要内容，如果未能解决你的问题，请参考以下文章

一些有趣的CSS3特性和案例总结

CSS3新特性总结

常用的css3新特性总结

Css3最新特性总结

HTML5新特性CSS3新特性

Css3有哪些新特性？