css3新增加的属性 (2)

  1、background:linear-gradient(to top,blue,red) 兼容写法:background:-wbkit-linear-gradient(bottom,blue,red) 

  2、gradient分为linear-gradient(线性渐变)和radical-gradient(径向渐变),重复的线性渐变:repeat-linear-gradient(),重复的径向渐变repeat-radical-gradient()

  3、radical-gradient( circle,20px 30px,red,blue)中的20px 30px 指的是圆心的水*和垂直位置  linear-gradient(20px 30px,red,blue)中的20px 30px 指的是渐*的水*和垂直半径

  4、线性渐变

    a、从上到下(默认情况下):background:linear-gradient(red,blue);

    b、从左到右:background:linear-gradient(to right,red,blue);

    c、对角:background:linear-gradient(to bottom right,red,blue)

  5、径向渐变

    a、颜色节点均匀分布(默认情况):background:radical-gradient(green,red,blue);

    b、颜色节点不均匀分布:background:radical-gradient(green 15%,red 5%,blue 60%);

    c、设置形状:background:radical-gradient(circle,green,red,blue);

(8)模糊和倒影

  1、模糊:filter:blur(10px)

    2、倒影(只有webkit内核支持,目前仅在Chrome,Safari,opera浏览器下支持)

    -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

   3、用线性渐变给图片加遮罩效果;用于遮罩的图片必须是png格式;

(9)动画(css3属性中有关制作动画的三个属性transition,transform和animation)

  1、transition

    a、transition-property:需要过渡的样式

    b、transition-duration:运动时间

    c、transition-delay:延迟时间

    d、transition-timing-function:运动形式     ease(默认,慢速开始,然后变快,然后慢速)/linear(匀速)/ease-in(快速)/ease-out(减速)/ease-in-out(先加速后减速)/cubic-bezier(x1,y1,x2,y2)贝塞尔曲线

    e、steps:实现一个关键逐帧动画功能

  2、transform属性向元素应用2D,3D效果,该属性允许我们对元素进行旋转,缩放,移动和倾斜

    a、translate()根据x轴和y轴位置给定的参数,从当前位置移动   transform:translate(-150px -150px);

    b、rotate()根据给定度数顺时针旋转,负值是允许,这样会逆时针旋转

    c、scale  默认为(1,1),进行图片缩放,给负值时,会先旋转再缩放

    d、skew  倾斜

    f、transform-origin:改变元素基点位置,当有3个参数时,第三个参数只能是数字+单位,不能用left/center/right

  3、3D涉及到的属性

    a、transfrom-style:指定嵌套元素如何在3D空间中呈现(加在父元素上)

      transform-style:flat(表示所有子元素在2D*面呈现)/perserve-3d(表示所有子元素在3D*面呈现);

    b、perspective:none/<length>;perspective取值为none或不设置,没有真3D空间;perspective取值越小,3D效果越明显;

    c、perspective-origin:决定看东西的角度

    d、backface-visibility:visible/hidden;决定背面是否可见

  4、animation和@ikeyframes一起用,支持animation动画的只有webkit内核 

    a、animation-property:需要过渡的样式

    b、animation-duration:运动时间

    c、animation-delay:延迟时间

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzffjg.html