CSS的过渡和2D效果，滤镜效果

浏览器私有属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 浏览器私有属性前缀是为了解决浏览器的兼容问题，当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候就不再使用了

常用的浏览器前缀

浏览器名称	内核	私有前缀
Chrome Safari	webkit	-webkit-
Firefox	gecko	-moz-
Opera	presto	-o-
IE	trient	-ms-

过渡效果

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"
transition-delay	规定过渡效果何时开始。默认是 0

注意：时间曲线可以有很多值

<style>
  div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /*鼠标离开时缓缓恢复*/
    transition:width 3s ease 0.12s;
  }
  div:hover{
    width: 500px;
    /* 过渡的属性 */
    /* transition-property: width;*/
    /*过渡的时间 */
    /* transition-duration: 3s; */
    /* 过渡的速度 */
    /*transition-timing-function: ease; */
    /*是否添加延迟 */
    /*transition-delay: 0; */
    /*合成 */
    transition:width 3s ease 0.12s;
  }
</style>
<div></div>

值	描述
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 之间的数值【立方贝塞尔曲线函数】

<style>
  div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /*鼠标离开时缓缓恢复*/
    transition:width 3s ease 0.12s;
  }
  div:hover{
    width: 500px;
    /* 过渡的属性 */
    /* transition-property: width;*/
    /*过渡的时间 */
    /* transition-duration: 3s; */
    /* 过渡的速度 */
    /*transition-timing-function: ease; */
    /*是否添加延迟 */
    /*transition-delay: 0; */
    /*合成 */
    transition:width 3s ease 0.12s;
  }
</style>
<div></div>

添加立方贝塞尔曲线函数效果 暂未添加案例效果

案例一：小米官网，鼠标悬浮从右侧显示导航效果

<style>
.banner{
    width: 1000px;
    background: url('../images/0.jpg') no-repeat ;
    background-size: 100%;
    background-clip: content-box;
    background-size: 100%;
    overflow: hidden;
    height: 400px;
}
.show{
    width: 0;
    float: right;
    margin-top: 300px;
    background: salmon;
    color: #fff;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding:0 10px;
    margin-right:-20px;
    transition: all 3s ease 0.12s;
}
.banner:hover .show{
    width: 300px;
    transition: all 3s ease 0.12s;
}
</style>
<div class="banner">
    <div class="show">这是一段被隐藏的文本</div>
</div>

2D效果

平移

语法：translate(X,Y)，既可以为正值，也可以为负值（向下、向右为正方向）

注意：尽量不要对元素本身设置当前这个属性，否则图片会一直跳，原因：悬浮时图片的位置发生了改变

案例一：鼠标悬浮向右平移元素

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        transform: translate(300px,0);
    }
</style>
<button>鼠标悬浮</button>
<div></div>

旋转

语法：transform:rotate(角度) 角度：单位deg 正值：顺时针旋转 负值：逆时针旋转

注意：inline行级元素是不能直接旋转的

案例一：div旋转360度

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        transition: all 2s;
    }
    button:hover+div{
        /* 旋转 */
        transform: rotate(360deg)
    }
</style>
<button>鼠标悬浮</button>
<div></div>

缩放

语法：transform:scale(x,y) x：表示x轴的缩放比例 y：表示y轴的缩放比例 x,y 值分别为原有元素宽高的倍数。 1为不缩放，大于1放大，小于1缩小

当为负值时，将会沿x轴或y轴进行翻转 当括号内两个数相同时，可以只写一个值代替。 如果只想扩大x轴或者y轴，那么属性为scaleX(n)和scaleY(n) transform-origin 影响变换方向。

案例一：鼠标悬浮放大图片

<style>
    img{
        transition: all 2s;
    }
    button:hover+img{
        /* 旋转 */
        transform: scale(0.5);
    }
</style>
<button>鼠标悬浮</button>
<img src="../images/1.jpg" alt="">

 案例二：鼠标悬浮放大心形

<style>
    .love {
    position: absolute;
    background-color: rgb(207, 105, 112);
    width: 250px;
    height: 250px;
    /* 元素居中显示 */
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(-45deg);
    transition: all 2s;
}
.love::before {
    content: "";
    position: absolute;
    background-color: rgb(207, 105, 112);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    top: -125px;
    left: 0px;
}
.love::after {
    content: "";
    position: absolute;
    background-color: rgb(207, 105, 112);
    border-radius: 50%;
    width: 250px;
    height: 250px;
    left: 125px;
    top: 0px;
}
.love:hover{
    transform:rotate(-45deg) scale(1.3);
}
</style>
<div class="love"></div>

 案例三：鼠标悬浮反转图片

<style>
    img{
        width: 400px;
    }
    img:hover{
        transform: scale(-1);
    }
</style>
<img src="../images/0.jpg" alt="">

倾斜

语法：transform：skew(x-angle,y-angle)

该元素会以横向（X轴）和垂直（Y轴）为参考确定角度; 如果只想沿x轴或者y轴进行倾斜，那么属性为skewX(n)和skewY(n)

旋转中心点

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 在没有transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、缩放，扭曲等操作都是以元素自己中心位置进行变形。 如果实现过渡动画，则变换中心点应该在元素初始CSS

 案例一：元素按照左上角的定点旋转

<style>
    img{
        width: 400px;
        /* 过渡效果 
/
        transition: all 2s;
*        /*
 旋转中心点 */
        transform-origin: right bottom;
    }
    img:hover{
        transform: rotate(360deg);

    }
</style>
<img src="../images/0.jpg" alt="">

滤镜效果：

  filter(滤镜) 属性:

        定义：filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

        注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

 none： 默认值，没有效果。

blur(px) ：给图像设置高斯模糊。值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

 brightness(%) ：给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

contrast(%)：调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

grayscale(%)：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

hue-rotate(deg)：给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

色环：

saturate(%)：转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

sepia(%)：将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

invert(%)：反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。