Web-css3--19年5月5日随笔

1.渐变：gradients

水平渐变 linear gradients

　　语法： background：linear-gradient（direction，color1，color2，........）；

        Direction

　　　　1：这个参数可以省略  如果省略了默认方向是从上到下；

　　　　2.这个参数如果不省略， 写方向的起始值top（从上到下） left（从左到右）

　　　　3.如果这个参数不省略  这个属性前面需要加前缀或者是to 终点方向；

　　　　4.对角渐变

　　　　5.角度  deg   0代表从下到上，90deg代表从左到右

　　　　6.渐变的过程

2.径向渐变  radial  gradients

　　　　起点是中心点，向四周渐变

　　　　1.shape   参数可以省略，如果省略默认是ellipse（椭圆形），还有个值是circle代表圆

　　　　2.background的简写

　　　　　　background：color（颜色），url（背景图片），no-repeat（平铺）50% 50%（位置）

　　　　　　背景大小可以是具体的像素值，也可以是百分比；

　　　　3.background-origin 背景的起点

2D转换：

　　属性是transform

　　属性值是 translate（）rotate（）scale（）skew（）

　　translate 平移

　　语法  translate（x，y）

　　1.只有一个值  代表水平平移

　　2.两个值代表水平和垂直方向上平移的距离

　　3.x和y可以为负值  负值代表正数的相反方向

　　4.兼容性的写法

　　　　

　　rotate 旋转

　　语法  transform：rotate（）

　　1.参数是数字 1代表当前元素的一倍不变 大于1变大，小于1变小

　　2.如果是一个参数  水平和垂直变化的值是一样的

　　3.如果是两个值  水平一个  垂直一个

　　4.兼容性

skew 拉伸

2.3D转换

　　1.这些平移，旋转等方法不再是围绕面，而是围绕轴

　　2.这些旋转元素的父级需要给予视距的属性 perspective

　　语法：

　　　　1.transform：rotateX（）

　　　　2.transform-origin：元素转换的位置  默认值是50% 50% 0这个点

　　　　第一个值是X轴  第二个是Y轴 第三个是Z轴

　　　　xy的值可以是单词left length % 但是z的值只能是length

　　　　3.transform-style 规定被嵌套元素在3d空间中如何显示，值flat是默认的   perserve-3d

　　　　4.perspective-origin：50% 50%   元素转换所指向的方向，就是渐渐消失的那个方向。

　　　　5.perspective 这个属性是视距的视距，是一种近大远小的效果

　　　　6.backface-visibility   visible（背面可见）  hidden  背面不可见

　3.transition  过渡

上面是transition的缩写 最后一个是延迟  即便是0 也得加单位

4.动画  animation

　　animation：name  duration  timing-function  delay   iteration-count  direction

　　animation-play-state：paused；动画停止

　　animation-fill-mode：forwards；动画完成停留在末尾，不返回原来的位置。

　　@keyframes  用来定义动画

　　语法：  @-webkit-keyframes  动画名

opciaty：0-1；

标准浏览器的写法，内容字体跟着一起有透明度。

background：rgba（255,2,2，3）标准浏览器拥有的，但是元素内容不跟着一起透明。

在ie8以下  透明度的写法   filter：alpha（opciaty=30）