CSS3-背景渐变

CSS3-背景渐变

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

一、背景渐变

1、背景色的渐变线性渐变background: gradient（有兼容性的问题-webkit- -moz-）【老式写法】

div{     
    width: 500px;     
    height:500px;     
    margin:10px;     
    float: left;     
    border: 1px solid #f66;     
    background: -webkit-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF));     
    background: -moz-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF));     
    background:-webkit-gradient(linear,left top,left bottom,from(#f00),to(#00f)); 
}

新写法---线性渐变

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-linear-gradient(top,red,white,blue);     
    background: -moz-linear-gradient(top,red,white,blue); 
}

新写法---径向渐变

div{    
    width: 500px;     
    height:500px;     
    margin:10px;     
    background: -webkit-radial-gradient(50% 50%,black,white,blue);     
    background: -moz-radial-gradient(50% 50%,black,white,blue); 
}

新写法---重复径向渐变

div{    
    width:200px;     
    height:200px;     
    padding: 20px;                     
    background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%) 
}

CSS3-过渡transition

transition-property规定应用过渡的 CSS 属性的名称。

transition-duration定义过渡效果花费的时间。默认是 0。

transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。

ease规定慢速开始，然后变快，然后慢速结束的过渡效果

linear规定以相同速度开始至结束的过渡效果

ease-in规定以慢速开始的过渡效果

ease-out规定以慢速结束的过渡效果

ease-in-out规定以慢速开始和结束的过渡效果

transition-delay规定过渡效果何时开始。默认是 0。

transition ：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]简写属性，用于在一个属性中设置四个过渡属性。

注释：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项

内容：

1.规定把效果添加到哪个 CSS 属性上

2.规定效果的时长

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

Internet Explorer 9 以及更早的版本，不支持 transition 属性。

Chrome 25 以及更早的版本，需要前缀 -webkit-。

1、translate( ,)偏移方法

translate()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

translateX(x) 定义转换，只是用 X 轴的值。

translateY(y) 定义转换，只是用 Y 轴的值。

#div2{     
    transform:translate(30px,50px);     
    -ms-transform:translate(30px,50px);  IE 9      
    -webkit-transform:translate(30px,50px); */ 
}

2、rotate()旋转方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

#div2{     
    transform:rotate(30deg);     
    -ms-transform:rotate(30deg);     
    -webkit-transform:rotate(30deg);  
}

3、scale( ,)缩放方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： div 元素的宽度是原始大小的两倍，高度是原始大小的三倍。

div {     
    margin: 150px;     
    width: 200px;     
    height: 100px;     
         
    -ms-transform: scale(2,3); /* IE 9 */     
    -webkit-transform: scale(2,3); /* Safari */     
    transform: scale(2,3); /* 标准语法 */ 
}

4、skew( ,)扭曲方法

skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

#div2{     
    transform:skew(30deg,20deg);     
    -ms-transform:skew(30deg,20deg);      
    -webkit-transform:skew(30deg,20deg);  
}

transform-origin设置旋转元素的基点位置： transform-origin: 50% 0%;

猜你喜欢