图片展示及动画效果

一.盒子阴影

css3中新加了盒子阴影，我们可以用box-shadow属性为盒子增加阴影

语法

box-shadow:h-shadow v-shadow blur spread color inset;
 /* 水平阴影位置 垂直阴影 模糊距离（虚实状况，数值越大越模糊） 阴影尺寸（阴影的大小） 内外阴影*/

注意：
1.默认的是外阴影，但是不可以写这个单词，否则会导致外阴影无效
2.盒子阴影是不占用空间，不会影响其他盒子的排列
3.前面两个必须写，后面的都可以省略

二.文字阴影

在css3中，我们可以使用text-shadow属性将阴影应用于文本。

语法

text-shadow:h-shadow v-shadow blur color

三.css3 过渡

过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或js的情况下，当元素从一种样式变为另一种样式时为元素添加效果。
过渡动画：从一个状态渐渐过渡到另一个状态
可以让我们的页面更加好看，动态感十足，虽然低版本的浏览器不支持，但是不会影响页面布局。

我们现在经常和：hover一起搭配使用。

语法

transition:要过渡的属性 花费时间 运动曲线 何时开始；

1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以，如果想要所有属性都过渡，那就直接写一个all就可以。
2.花费时间：单位是秒（必须写单位）比如：0.5s
3.运动曲线：默认是ease，可以省略
4.何时开始：单位是秒（必须写单位）可以设置延迟触发的时间，默认为0s（可以省略）
后面两个值可以省略
记忆口诀：谁做过渡给谁加

如果想要加多个属性，要用逗号进行分割

四.滤镜（ 图片变模糊）

css3滤镜filter
filter css属性将模糊或颜色偏移等图形效果应用于元素

语法

filter:函数（）;例如：filter：blur（5px）；  blur模糊处理 数值越大越模糊

calc函数
此函数可以让你在声明css属性值时执行一些计算
语法
width:calc(100%-80px);
括号里面可以使用±*/来计算

五.2d转换

转换（transform）是css3中具有颠覆性的特质之一，可以实现元素的位移，旋转，缩放等效果
转换可以简单理解为变形
·移动translate
·旋转rolate
·缩放scale

1.二维坐标系

2d转换是改变标签在二维平面位置和形状的一种技术

2.移动translate

2d移动是2d转换中的一种功能，可以改变元素在页面中的位置，类似定位。

a.语法

移动盒子的位置：定位，盒子外边距，2d转换
x就是x轴上移动位置，y就是y轴上移动位置，中间用逗号分割

transform:translate(x，y) ; 

如果只动x或者y可以分开写或者一个设为零translateX（n）

b.重点

1）定义2d转换中的移动，沿着x和y轴移动元素
2）translate最大优点：不会影响其他元素的位置
3）translate中的百分比单位是相对于自身元素的translate(移动盒子本身的宽度和高度)
4）对行内标签没有效果

3.旋转rotate

2d旋转是让元素在2维平面内顺时针或者逆时针旋转

a.语法

transform:rotate(度数)

b.重点

·rotate里面跟度数，单位是deg，比如rotate（45deg
·角度为正是为顺时针，为负时为逆时针
·默认旋转的中心点是元素的中心点

4.2d转换中心点transform-origin

我们可以设置元素转换的中心点

a.语法

transform-origin: x y;

b.语法

·注意后面xy要用空格隔开
·xy默认转换点是元素的中心点（50% 50%）
·还可以给xy设置像素或者方位名词（top bottom left right center）

5.缩放scale

缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性就可以控制它放大还是缩小。

a.语法

transform:scale(x,y);

b.注意

·注意其中的xy要用逗号分割
·transform:scale(1,1);宽高都放大一倍，相当于没有放大。
·transform:scale(2,2);宽和高都放大了两倍
·transform:scale(2);只写一个参数表示第二个参数和第一个是一样的。
·transform:scale(0.5);缩小
·sacle缩放的最大优势是：可以设置转换中心点的缩放，默认以中心点缩放，而且不会影响其他的盒子

6.2d转换的综合性写法

注意

a.同时使用多个转换，其格式为：transform:tranlate() rotate() scake()
b.其顺序会影响转变的效果（先旋转会改变坐标轴的方向）
3.当我们同时有位移和其他属性的时候，记得将位移放在最前面

2d转换总结

1.转换transform我们简单理解就是变形有2d和3d
2.我们暂且学了三个，为位移，旋转和缩放
3.2d移动translate（x，y） 最大优势是不影响其他盒子，里面的参数要用%，是相对于自身的高度和宽度计算的
4.可以分开写比如translateX（x）和translateY(y)
5.2d旋转rotate（度数）可以实现旋转元素，度数单位为deg
6.2d缩放scale（x，y） 里面的参数是数字，不跟单位，可以是小数，最大的优势是不会影响其他的盒子。
7.设置转换中心点transform-origin：x，y；参数可以是百分比，像素或者是方位名词
8.当我们同时有位移和其他属性的时候，记得将位移放在最前面

六.动画

动画（animation）是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确的控制一个或者一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多的变化，更多控制，连续自动播放等

1.动画的基本使用

制作动画分为两步：
a.先定义动画
b.在使用（调用）动画

1）先用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

动画序列

·0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
·在@keyframes中规定某项css样式，就能创造有当前样式逐渐改为新样式的动画效果
·动画是元素从一种个样式逐渐改变为另一种样式的效果，可以改变任意多样式，任意多次数
·请用百分比来规定变化发生的时间，或者用关键词“from”和“to”，等同于“0%”和“100%”

2.元素使用动画

div{
    width:200px;
    height:200px;
    background:aqua;
    margin:100px auto;
    <!-- 调用动画 -->
    animation-name:动画名称;
    <!-- 持续时间 -->
    animation-duration:持续时间;
}

3.动画的常用属性

动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation:myfirst 5s linear（匀速） 2s infinite （反复播放）alternate（反方向播放）;

· 前两个属性必须写
· 简写属性里面不包含animation-play-state
· 暂停动画：animation-play-state: paused; 经常和鼠标经过等其他配合使用
· 想要动画走回去，而不是直接跳回：animation-direction: alternate
· 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

4.速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是ease

steps（）就是分几步完成动画，有了他就不要再写easw或者liner了，像打字机一样一顿一顿的

    white-space: nowrap;
            /* 让文字强制一行内显示 */

七.3d转换

我们生活的环境是3d的，照片是3d物体在2d平面呈现的例子

特点

·近大远小
·物体后面遮挡不可见
当我们在网页上创建3d效果时参照这些特点就可以产出3d效果

1.三维坐标系

三维坐标系是指立体空间，立体空间是由三个轴共同组成的
·x轴：水平向右 注意：x右边是正值，左边是负值。
·y轴：垂直向下 注意：y下面是负值，上面是正值
·z轴：垂直屏幕 注意：往外面的正值，往里面的负值 （物体越大z值越大）

2.3d移动 translate3d

3d移动就是在2d移动的基础上多加了一个可移动的z方向
translateZ一般要用px单位

<!-- 3d移动简写 -->
transform:translate3d(100px,100px,100px);

这种情况x，y不可以省略，只能写0

3.透视prespective

在2d平面产生近大远小的视觉立体，但是只是效果二维的
·如果想要在网页上产生3d效果需要透视（理解成3d物体投影在2d平面内）
·模拟人类的视觉位置，可认为安排一只眼睛去看
·透视我们也称为视距：视距就是人的眼睛到屏幕的距离
·距离视觉点越近的在电脑平面的成像越大，越远成像越小
·透视的单位是像素

透视写在被观察元素的父盒子上面
d：就是视距，视距就是一个人眼睛到屏幕的距离
z：就是z轴，物体距离屏幕的距离，z轴越大（正值），我们看到的物体越大

4.tranlateZ

translateZ(100px)：仅仅是在z轴上移动，有了透视，就可以看到translateZ引起的变化了

给父亲添加一个透视，给下面的子盒子加多个translateZ

5.3d旋转rotate3d

3d旋转指可以让元素在三维平面内沿着x，y，z轴或者自定义轴进行旋转

语法

transform：rotateX（45deg）沿着x轴正方向旋转45度（单杆）
transform：rotateY（45deg）沿着y轴正方向旋转45度（钢管舞）
transform：rotateZ（45deg）沿着z轴正方向旋转45度（大转盘）
transform：rotate3d（x,y,z,deg）沿着自定义轴旋转deg为角度（了解即可）
xyz表示旋转轴的矢量，是表示你是否希望沿着此轴旋转，最后一个表示角度

transform: rotate3d(1,1,0,45deg);
<!-- 沿着对角线旋转 -->

左手准则（元素旋转方向的判断）

·左手的拇指指向x轴方向
·其余的手指弯曲的方向就是该元素沿着x轴旋转的方向
·左手的拇指指向y轴的正方向
·其余手指的弯曲方向就是元素沿y轴旋转的方向

6.3d呈现transform-style

·控制子元素是否开启三维立体环境
·transform-style：flat子元素不开启三维立体环境 默认的
·transform-style：preserve-3d；子元素开启立体空间
·代码写给父级，但是影响的是子盒子
·这个属性十分重要，后面肯定用