【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;