摘要：要实现这一点，必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后，保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。

css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！

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

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

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

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

栗子1

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

栗子2

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

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

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。
当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s;

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

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

html

    

        

            html
            

                
div
                
h1
            
        
        

            js
            

                
string
                
array
                
object
                
number
            
        
        

            css3
            

                
transition
                
animation
            
        
        

            框架
            

                
vue
                
react
            
        
    
    



    

        

            html
            

                
div
                
h1
            
        
        

            js
            

                
string
                
array
                
object
                
number
            
        
        

            css3
            

                
transition
                
animation
            
        
        

            框架
            

                
vue
                
react
            
        
    
    

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}

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

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

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

栗子1

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

栗子2

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

栗子3

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

还有一个重要属性

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */      

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

代码如下

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

代码如下

    
    




    

        

            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            

                

                

                

                

            
        
        

            stackoverflow
        
    

这个代码实在太多了，大家直接上网址看吧。css3-loading

代码如下

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

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

transform:rotate(30deg);

transform:translate(30px,30px);

transform:scale(.8);

transform: skew(10deg,10deg);

transform:rotateX(180deg);

transform:rotateY(180deg);

transform:rotate3d(10,10,10,90deg);

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

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

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

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

运行效果

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

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

代码

效果

有趣变化

那个更好看，大家看着办

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

 
 



border-radius

运行结果

这一块主要讲css3提供背景的三个属性

制定背景绘制（显示）区域

默认情况（从边框开始绘制）

从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！（background-clip: padding-box;）

只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！（background-clip: content-box;）

引用菜鸟教程的说法：background-Origin属性指定background-position属性应该是相对位置

下面的div初始的html和css代码都是一样的。如下
html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:10px dashed black;
    padding:35px;
    background:url("logo.png") no-repeat,#ccc;
    background-position:0px 0px;
}

下面看下，background-origin不同的三种情况

这个相信很好理解，就是制定背景的大小
下面的div初始的html和css代码都是一样的。如下
html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:1px dashed black;
    padding:35px;
    background:url("test.jpg") no-repeat;
}

这个没什么，就是在一张图片，使用多张背景图片，代码如下！
html

两张图片的背景

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:1px dashed black;
    padding:35px;
    background-size: contain;
    background:url("test.jpg") no-repeat left,url(logo.png) no-repeat right;
}

这个也可以说是倒影，用起来也挺有趣的。

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

html

下倒影

黑白色filter: grayscale(100%)

褐色filter:sepia(1)

饱和度saturate(2)

色相旋转hue-rotate(90deg)

反色filter:invert(1)

透明度opacity(.5)

亮度brightness(.5)

对比度contrast(2)

模糊blur(3px)

阴影drop-shadow(5px 5px 5px #000)

这里说的弹性布局，就是flex；这一块要讲的话，必须要全部讲完，不讲完没什么意思，反而会把大家搞蒙！讲完也是很长，所以，这里我也只贴教程网址。博客讲的很好，很详细！

Flex 布局教程：语法篇
Flex 布局教程：实例篇

栅格化布局，就是grid；这一块和flex一样，要讲就必须讲完。这块的内容和flex差不多，也有点长，这里我也贴链接，这个链接讲得也很详细！

Grid布局指南

这一块，我也是了解过，我觉得多列应该还是挺有用的。虽然我没在项目中用过，下面我简单说下！举个例子！这个属性，建议加私有前缀，兼容性有待提高！
html

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

css

.newspaper
{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule:2px solid #000;
    -webkit-column-rule:2px solid #000;
    -mox-column-rule:2px solid #000;
}    

box-sizing这个属性，网上说法是：属性允许您以特定的方式定义匹配某个区域的特定元素。

这个大家看着可能不知道在说什么，简单粗暴的理解就是：box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！如下图

box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！不过由于我最近的项目都是使用rem布局。所以媒体查询就没怎么用了！但是，媒体查询，还是很值得一看的！说不定哪一天就需要用上了！

栗子代码如下

 
 




重置浏览器窗口查看效果！
如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。
如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

运行效果

混合模式，就像photoshop里面的混合模式！这一块，我了解过，在项目上没用过，但是我觉得这个应该不会没有用武之地！
css3的混合模式，两个（background-blend-mode和mix-blend-mode）。这两个写法和显示效果都非常像！区别就在于background-blend-mode是用于同一个元素的背景图片和背景颜色的。mix-blend-mode用于一个元素的背景图片或者颜色和子元素的。看以下代码，区别就出来了！

这一块图片很多，大家看图片快速扫一眼，看下什么效果就好！

代码

    
        
        
    
    
    
        
        
        
原图
        

        
multiply正片叠底
        

        
screen滤色
        

        
overlay叠加
        

        
darken变暗
        

        
lighten变亮
        

        
color-dodge颜色减淡模式
        

        
color-burn颜色加深
        

        
hard-light强光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation饱和度
        

        
color颜色
        

        
luminosity亮度
        

    

运行效果

代码

    
        
        
    
    
    
        
原图
        

        
multiply正片叠底
        

        
screen滤色
        

        
overlay叠加
        

        
darken变暗
        

        
lighten变亮
        

        
color-dodge颜色减淡模式
        

        
color-burn颜色加深
        

        
hard-light强光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation饱和度
        

        
color颜色
        

        
luminosity亮度
        

    

运行效果

好了，个人总结的css3的新特性，就到这里了！其中有一些新特性如果想使用的好，必须多去了解和练习。有些新特性，如果要多带带详细的讲，比如动画，过渡，弹性盒子，渐变等。估计可以写几篇或者十几篇文章！特别是动画，估计写一本书都可以！上面对css3新特性的讲解和案例，都是基础的认识和用法，希望能起到一个拓展思维的作用。最重要的是，大家要多加练习，实操是最重要的一环，孰能生巧也是这样来的！css3不仅要会用，也要用好，用好css3，在项目的开发上，很有帮助的！当然如果我有发现什么好玩的，有用的，我会继续写文章。
最后，如果大家觉得我哪里写错了，写得不好，或者有什么推荐的！欢迎指点！

-------------------------华丽的分割线--------------------
想了解更多，关注关注我的微信公众号：守候书阁