CSS中的2D、过渡和渐变

 

一、过渡属性transition

  transition一般是设置动画效果延续时间（过渡时间）

        css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。过渡属性需要触发事件，如：hover（鼠标划过事件）     

1. transition-property：检索或设置对象中的参与过渡的属性

说明：属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性

 

2. transition-duration：检索或设置对象过渡的持续时间      

说明：设置过度时间（s, ms）    1s = 1000ms

 

3. transition-delay：检索或设置对象延迟过渡的时间

说明：设置延迟过度时间（s, ms）       属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；

 

4. transition-timing-function：检索或设置对象中过渡的动画类型

说明：

       linear          匀速

       ease（默认值） 逐渐慢下来

       ease-in    加速

ease-out 减速

ease-in-out     先加速后减速

5、复合式写法：transition:all 2s  1s linear ;

           transition: 2s  linear  1s   all  ;

说明：当使用复合式写法的时候，过度时间（动画效果时间）和延迟时间的顺序是不能互换的，第一个值代表过度时间，第二个值代表延迟时间；

二、2D  transform

       transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。

   2D效果主要是分为rotate（旋转）、scale（缩放）、skew（倾斜）、tranlation（位移）

 

 2D功能函数：

1、2D位移 translate()

     可以使用位移属性，制作多帧动图

说明：translate(tx)    当参数设置一个值的时候，代表水平方向的位移；

      translate(tx，ty)     第一个值代表水平方向的距离，

第二个值代表垂直方向的距离；

          translate(tx，ty,  tz)  第一个值代表水平方向的距离，第二个值    垂直方向的距离.第三个值   沿Z轴移动（3D）

      translateX(tx)    指定方向设置位移    沿X轴移动

        translateY(ty)    指定方向设置位移    沿Y轴移动  

        translateZ(tz)    指定方向设置位移    沿Z轴移动   ( 3D)  

 

当属性值为正值时  代表的是向右或者向下移动，当为负值的时候  代表 向左或向上移动

说明：属性值可以用px，也可以用%（百分比大小的参照物是元素的宽高）

说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。

 

 

 

 

 

 

2、2D缩放scale()    

说明： 属性值代表的是倍数，是不用加单位； 0——1  之间是 缩小的效果， 大于1的时候都是放大效果； 默认值是1；

      0表示缩到0，1表示放大到原图大小。主要应用于闪烁的小球

  scale( 值1 )          代表水平和垂直都放大或者缩小    

      scale( 值1，值2 )    值1：  水平方向的缩放大小      

值2 ：垂直方向

属性值可以设置为负值，但是很少用；

         scaleX（值）   水平方向的缩放比例

         scaleY（值）   垂直方向的缩放比例

         scaleZ（值）   Z轴方向的缩放比例       （3D）

 

 

3、2D旋转rotate()

   说明:  属性值的单位是度（deg）

rotate()        沿着中心点旋转；     

只能放一个属性值 ，

正值：顺时针旋转；  

负值： 逆时针旋转；

rotateX()      沿X轴旋转

rotateY()     沿Y轴旋转

rotateZ()      沿Z轴旋转    （3D）

4、2D倾斜 skew()

    可以应用于斜体导航栏

说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜      负值：向右或向下倾斜

skew( 值1 ) 一个值的时候  代表 沿X轴倾斜

skew( 值1，值2)        值1：  沿X轴的倾斜     值2 ：沿Y轴的倾斜

skewX（）  沿X轴的倾斜   

skewY（）  沿Y轴的倾斜

说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。

      变形时元素默认情况下都是沿着元素的中心点去变形的

当使用复合式写法的时候，他们顺序不同，会导致结果不一样，他们执行的顺讯是从后向前解析的。

transform: translate(100px) rotate(60deg);    

   5、原点设置属性：transform-origin

      可以应用于折扇效果制作，tranform-origin：center bottom；定义旋转中心在水平靠下。

 定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

说明：transform-origin：值1    值2  ；    值1： 水平    值2：  垂直

px      %       left   top   right  bottom ;

 

 

背景隐藏：

可以应用于制作反转相册避免第一张图片翻转之后会在显示第二张照片时出现重影，可以给第一张照片设置backface-visibility：hidden；

backface-visibility：visible；可见（默认值）

backface-visibility：Hidden；隐藏

backface-visibility的bug：如果元素反转之后显示在上一层，给当前元素添加一个背景色就可以解决。

 

CSS3 渐变（gradient）：

CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

 

线性渐变：

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变：

background：linear-gradient（red 0%，red 20%，green 20%, green 40% ）这样的渐变是一条一条展示的，几乎没有渐变色，都是纯色

镜像渐变

background：radial-gradient（red 0%，red 20%，green 20%, green 40% ）这样的渐变是一圈一圈展示的，几乎没有渐变色，都是纯色

重复性渐变：

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

说明：

每个属性之间都用逗号隔开。

direction：默认为to bottom，即从上向下的渐变；

度数：10deg（自上向右0度-90度，旧版本浏览器相反自右而上0-90度），左下：to left bottom，右下：to right bottom

stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

background: linear-gradient(to bottom,red 30%  green 60%);

注：自上而下30%的红+红绿渐变+60%的绿

今天分享一些2D、渐变和过度的属性，不仅可以加深自己的记忆，同时也能帮助大家了解CSS和HTML中的一些属性，共同学习，一起进步。

ps：上面提到的一些应用效果，在我的博客里都有，大家感兴趣的话可以看看。