CSS3

文字阴影

• css3中，text-shadow可以给文本应用阴影，通过属性值规定阴影水平距离、垂直距离、模糊距离、颜色

属性值	说明
h-shadow	必需，水平阴影的距离，允许负值
v-shadow	必需，垂直阴影的距离，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色

文字阴影语法

• text-shadow给文本添加阴影，属性值有2-3个长度值和一个可选的颜色值，省略的长度是0；

    text-shadow: 3px 3px 5px #f00;

多层阴影

• text-shadow可以给文本添加多层阴影，逗号分隔多层阴影的属性值，多阴影中，先写的阴影压盖在后写的阴影上；

    text-shadow: 3px 3px #f00,
    	6px 6px #0f0,
    	9px 9px #00f;

盒子边框阴影

• 在CSS3中，box-shadow属性用于对盒子边框设置阴影

属性值	说明
h-shadow	必需，水平阴影的距离，允许负值
v-shadow	必需，垂直阴影的距离，允许负值
blur	可选，模糊的距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

边框阴影语法

• box-shadow给盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选的inset关键字来规定，省略的长度是0；

    box-shadow: 20px 20px 5px 20px #f00;

多层阴影

• box-shadow可以给盒子添加多层阴影，逗号分隔多层阴影的属性值，多阴影中，先写的阴影压盖在后写的阴影上；

    box-shadow: 20px 20px 5px #f00,
    	40px 40px 5px #0f0,
    	60px 60px 5px #00f;

过渡属性

• 属性名：transition
• 作用：在不使用Flash动画或JavaScript的情况下，使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态（A，B），那么A和B之间就可以实现平滑的过渡效果，为了方便看效果，使用：hover切换状态

    过度属性：属性 过渡时间 时间曲线 延时时间 
    transition: all 2s ease-in 0s;

单一属性写法

属性值	说明
transition	简写属性,用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡花费的时间,默认是0s
spread	可选，阴影的尺寸
transition-timing-function	规定过渡的时间曲线,默认是"ease"
transition-delay	规定过渡时间开始时间,默认是0s

transition-property过渡的属性

• none:表示没有属性过渡
• all:表示所有变化的属性都过渡
• 属性名使用具体的属性名,多个属性名中间用逗号隔开

transition-timing-function时间曲线

属性值	说明
linear	规定以相同的速度至结束的过渡效果
ease	规定以慢速开始,以慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ase-in-out	规定以慢速开始,以慢速结束的过渡效果
cubic-bezier(x1,y1,x2,y2)	在cubic-bezier(x1,y1,x2,y2)函数中定义自己的值,x1,x2取值范围[0,1],y1,y2取值任意,[x1,y1],[x2,y2]表示拉扯的两个点的坐标

2D转换

2D转换

• 属性名:transform
• 作用:对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和动画来取代大量的之前只能开Flash才可以实现的效果
• 属性值：多种转换方式的属性值，可以实现不同的转换效果

位移 translate()

属性值	说明
translate(x,y)	x,y分别为水平和垂直方向的位移的距离，可以为px或百分比
translate(x)	只有一个数值，表示水平方向的位移

缩放 scale()

属性值	说明
scale(x,y)	x,y分别为改变元素的宽度和高度的倍数
scale(n)	只有一个值，表示高度和宽度同时缩放n倍
scaleX(n)	表示宽度缩放n倍，高度不变
scaleY(n)	表示高度缩放n倍，宽度不变

旋转 rotate()

• 书写语法
• rotate（数字deg）
• 其中deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转，2D的旋转只有个属性值
• 注意：元素旋转后，坐标轴也跟着发生变化
• 因此，多个属性值同事设置个transform时，书写顺序不同导致的转换效果有差异

倾斜 skew()

• 书写语法
• skew(数字deg,数字deg)
• 两个属性值分别代表水平和垂直方向倾斜的角度，属性值可正可负，第二个数值不写，默认为0

transform-origin属性

• 作用，设置调整元素的水平个垂直原点的位置（我的理解是调整坐标原点的位置哈哈）
• 调整原雕塑的基准点
• 属性值：包含两个，中间用空格分隔

值	说明
x	定义X轴的原点在何处，可能的值：left、center、right、像素值、百分比
y	定义Y轴的原点在何处，可能的值：top、center、bottom、像素值、百分比

3D转换

透视属性 perspective

• 作用：设置在Z轴的实现焦点的观察位置，从而实现3D查看效果
• 属性值：像素值，数值越大，观察点距离Z轴原点越远，图形效果越完整且接近原始尺寸
• 注意：透视属性需要设置给3D变化元素的父亲

3D位移

值	说明
translateX(x)	设置X轴的位移值
translateY(y)	设置Y轴的位移值
translateZ(z)	设置Z轴的位移值

transform-style 属性

• 用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
• 属性值：flat（所有元素在2D平面呈现）、preserve-3D（3D空间），一般来说，该属性设置给3D变换图形对的父级元素

浏览器兼容

• chrome、safari需要前缀-webkit-
• IE9需要前缀 -ms-

动画

• css3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、flash动画及JavaScript
• css3动画制作分两步：创建动画、绑定动画

@keyframes 规则

• @keyframes 规则用于创建动画
• 在@keyframes 中规定某项css样式，就能创建由一种样式逐渐变化为另一种样式的效果可以改变任意多的样式任意多的次数
• 需要使用百分比来规定变化发生的时间，或用“from”和“to”，等同于0%和100%，0%是动画的开始，100%是动画的结束

		.box {
            width: 100px;
            height: 100px;
            margin: 200px auto;
            border-radius: 50% 50%;
            background-color: skyblue;
            /* 添加绑定动画 */
            animation: move 3s linear infinite;
        }

        /* 自定义动画，过程 */
        @keyframes move {

            /* 从头开始，最好保持跟默认样式的状态一致 */
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(100PX);
            }

            50% {
                transform: translateY(0);
            }

            75% {
                transform: translateY(-100PX);
            }

            /* 到结束位置 */
            100% {
                transform: translateY(0);
            }
        }

animation 属性

• 需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果，animation属性用于对动画进行捆绑
• 语法：

div {
	animation:动画名称 过渡时间 速度曲线 动画次数 延时时间;
}

单一属性列表

属性	值
animation-name	规定@keyframes 动画的名称
animation-duration	规定一个动画完成一个周期所花费的秒或毫秒，默认0
animation-timing-function	规定动画的速度曲线，默认“ease”
animation-delay	规定动画何时开始，默认0
animation-iteration-count	规定动画被播放的次数，默认是1，infinite表示无限次播放

浏览器兼容

• chrome和safari需要前缀-webkit-
• IE9及更早的版本，不支持@keyframes规则或animation属性