1、transition
语法:transition: property duration timing-function delay;
eg:transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)
/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/
transition: width,.5s,ease,.2s
值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。 //把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style>
2、animation
语法
animation: name duration timing-function delay iteration-count direction;animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)
/*2秒后开始执行一次logo2-line动画,运动时间2秒,运动曲线为 linear*/ animation: logo2-line 2s linear 2s;
值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。 //使用简写属性,将动画与 div 元素绑定: <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style>
还有一个重要属性
animation-fill-mode : none | forwards | backwards | both; /*none:不改变默认行为。 forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 both:向前和向后填充模式都被应用。 */
3、transform
transform:rotate(30deg); //顺时针旋转30度
transform:translate(30px,30px); //translate(x,y) x移动和y轴移动
transform:scale(.8); //缩放0.8
transform: skew(10deg,10deg); //skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
语法
transform: none|transform-functions;
值 描述 测试 none 定义不进行转换。 测试 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 测试 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 测试 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换,只是用 X 轴的值。 测试 translateY(y) 定义转换,只是用 Y 轴的值。 测试 translateZ(z) 定义 3D 转换,只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 测试 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 测试 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 测试 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转,在参数中规定角度。 测试 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 测试 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 测试 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 测试 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 测试 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 测试 perspective(n) 为 3D 转换元素定义透视视图。 测试
4.选择器
5、box-shadow
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外,设置inset就是从外往里);
box-shadow: h-shadow v-shadow blur spread color inset;box-shadow: 10px 10px 5px #888888;h-shadow v-shadow blur color
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 描述 测试 h-shadow 必需。水平阴影的位置。允许负值。 测试 v-shadow 必需。垂直阴影的位置。允许负值。 测试 blur 可选。模糊距离。 测试 spread 可选。阴影的尺寸。 测试 color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试 inset 可选。将外部阴影 (outset) 改为内部阴影。 测试
6、border-image
border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量(默认0) 铺满方式--重复(repeat)、拉伸(stretch)或铺满(round)(默认:拉伸(stretch));
可能的值
值 描述 测试 border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移。 border-image-width 图片边框的宽度。 border-image-outset 边框图像区域超出边框的量。 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
7、border-radius
border-radius: n1,n2,n3,n4; /*n1-n4四个值的顺序是:左上角,右上角,右下角,左下角。*/
参考文档: