【Web前端笔记10】CSS3新特性
10 CSS3新特性
１、圆角
２、阴影
（１）盒阴影
３、背景渐变
（１）线性渐变（主要掌握这种就可）
（２）径向渐变
４、transform 转换 变型
（1）位移 单位px ％
（2）旋转 翻转
（3）缩放
（4）倾斜
５、transition 过渡
(4)简写
６、animation 动画
（1）概念：动画是使元素从一种样式逐渐变化为另一种样式的效果
（2） 定义动画的过程
（3）调用动画
10 CSS3新特性
１、圆角
border－radius：；
- value：表示四个角
- value value：左上角和右下角 右上角和左下角
- value value value：左上角 左下角和右上角 右下角
- value value value value：左上角 右上角 右下角 左下角
取值：ｐｘ ％
不能取负值（取值越大 幅度越大）
百分比border－radius可以用来画圆形和椭圆
（１）指定背景颜色的元素圆角
（２）指定边框的元素圆角
２、阴影
（１）盒阴影
box－shadow 向框添加一个或多个阴影
box－shadow：h-shadow v-shadow blur spread color inset；
- h-shadow：必需 水平阴影的位置 可负值
- v-shadow：必需 垂直阴影的位置 可负值
- blur：可选 模糊距离 只能正值
- spread：可选 阴影尺寸 可负值
- color：可选 阴影颜色
- inset：可选 将外部阴影（outset）改为内部阴阴影
３、背景渐变
CSS３渐变可以在两个或多个指定的颜色之间现实平稳的过渡
background－image：；
简写为：background：；
（１）线性渐变（主要掌握这种就可）
- 向下／向上／向左／向右／对角方向
- 必须至少定义两种颜色结点
- background-image: linear-gradient(direction，color－stop１，color－stop２，．．．);
- 同时也可以设置一个起点和一个方向（或一个角度）
background-image: linear-gradient(angle,color－stop１，color－stop２，．．．);
角度是指水平线和渐变线之间的角度，逆时针方向计算，换句话说，０deg将创建一个从下到上的渐变，９０deg将创建一个从左到右的渐变
默认渐变方向:从上往下，方向可以省略
取值：
- 关键词 to right
（２）径向渐变
由它们的中心定义
background-image: radial-gradient(渐变的中心点，渐变的形状，颜色１，颜色２，．．．)
渐变的中心点默认为宽高的一半
可以设置top right left bottom 注意兼容性
渐变的形状默认为
- 可以设置为circle
background-image: radial-gradient(top,circle,red,orange,yellow,green);
/* 假如浏览器不支持,在后面加浏览器前缀-wenkit-radial-gradient */
４、transform 转换 变型
转换的效果是让某个元素改变形状、大小和位置（例如照片墙照片向左或者向右倾斜）
transform属性向元素应用２D或３D转换，该属性允许我们对元素旋转、缩放、移动或倾斜。
transform: none|transform-functions;
属性值：
（1）位移 单位px ％
transform: translate(x,y);
当只取一个值,表示水平方向移动的距离
当取两个值,表示水平方向和垂直方向移动的距离
取正值,往右下移动
取负值,往左下移动
transform: translateX();
transform: translateY();
3D位移:
transform:translate3D(x,y,z);
（2）旋转 翻转
单位deg(弧度)
transform:rotate();
取正值,顺时针旋转
取负值,逆时针旋转
/* transform-origin: right bottom;以右下角为原点进行旋转 *//* transform: translate(50px,50px) rotate(-60deg);先向右下方移动50p x,再逆时针旋转60° */默认元素的中心点为元素的正中心，宽高的一半
可以通过transform-origin:；修改元素的中心点
（3）缩放
取值0-1：缩小
>1：放大
transform: scale(x,y);
当只取一个值,等比例缩放
当取两个值,表示水平方向和垂直方向 transform: scaleX();
transform: scaleY();
/* transform: scaleX(1.5); 水平方向放大1.5倍 transform: scale(3,1);
水平方向放大3倍,垂直方向放大1倍 */
（4）倾斜
单位deg
transform: skew(x,y);
当只取一个值,表示水平方向倾斜的弧度
当取两个值,表示水平方向和垂直方向倾斜的弧度
transform: skewX();
transform: skewY();
/* transform: skew(30deg); 水平方向倾斜30° */
负值的话往左上倾斜，不可为直角
５、transition 过渡
（1）作用：从一种元素样式逐渐改变为另外一种样式（比如点击导航栏的二维码，二维码会慢慢落下来）
（2）注意：过渡必须有触发事件
比如鼠标悬停和鼠标点击等
（3）过渡的属性
- 过渡的属性——必须
- 转换
- 阴影
- 取值为数值
- 取值为颜色
- 可以过渡的属性
- 过渡的时间——必须
- transition-timing-function:;
- 1s=1000ms
- 取值为s|ms
- 默认为0s|0ms
- transition-duration:;
- 过渡的速度变化类型——可选
- 取值:
ease 默认值 先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速
- 过渡的延迟时间——可选
- transition-delay: ;
- 默认0s|0ms
- 取值正负
当取正值,表示多久以后出发这个过渡
当取负值,表示把这段时间的效果跳过
- 可以过渡的属性
- 取值为颜色
- 取值为数值
- 阴影
- 转换
(4)简写
transition：过渡的属性 过渡的持续时间 过渡是速度变化类型 过渡的延迟时间；
transition: all 2s ease-in-out -1s;
.box{width:200px;height: 200px;background-color: red;transition-property: width,background-color,border-radius;/* 可以简写为all */transition-duration: 1s,2s,3s;/* 若是三者过渡时间都是1s的话,就只需写一个值就行 */}.box:hover{width: :1200px;background-color: green;border-radius: 100px;}/* 如果只写在鼠标悬停那里,那么鼠标离开,样式会立马回到原样,所以要写在元素里面 */６、animation 动画
（1）概念：动画是使元素从一种样式逐渐变化为另一种样式的效果
- 可以改变任意多的样式和次数
- 用百分比来规定变化发生的事件，或者用关联词“from”and"to"，等同于0%和100%
- 动画比较类似于flash中的逐帧动画，
- 过渡只需要控制开始和结束的状态
（2） 定义动画的过程
@keyframes change {0%|from{CSS样式}任意百分比{CSS样式}100%|to{CSS样式}}（3）调用动画
animation:name 持续时间 速度变化类型 延迟时间 播放次数（number|infinite）播放方向（alternate）动画停在最后一帧;
必须 必须 可选 可选 可选 次数|无限循环 可选
- animation-name:change; 动画名称
- animation-duration: 1s; 动画持续时间
- animation-timing-function: ease-in; 动画速度变化类型
- animation-delay: 0s; 延迟时间
- animation-iteration-count: 3; 动画播放次数
- animation-direction: alternate; 动画的播放方向放方向
- animation-fill-mode: forwards; 动画停留在最后一帧
- animation-play-state: 动画的播放状态 默认running;