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