CSS

动画的属性

速度曲线表格: 值 含义 linear 动画从头到尾的速度是相同的。匀速 ease 默认。动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 steps() 指定了时间函数中的间隔数量(步长) 延迟时间: 就是指这个动画需要延迟多久再去播放 animation: big 10s 10s; 重...

动画的使用

过度只能是两个状态之间的转换 动画可以实现多个状态的变化过程 定义动画写发( 一 ): <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> <style> .box{ width: 100px; height: 30px; bac...

transform-origin元素

transform-origin是用来修改旋转角度的 transform-origin:(水平 垂直); 例如: transform-origin:(left top); 就是说左上角旋转 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equi...

transform元素

过度:transition: all 0.5s; 如果使用多重转换如:             transform: translate(600px) rotate(900deg); 一定是要线平移在旋转 如果是先旋转的话就还会改变xy轴的轨迹 值 描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 matrix3d(n,n,n,n,n,...

vertical-align元素

vertical-align:baseline(元素的基线与父元素的基线对齐) vertical-align:sub(降低元素的基线到父元素合适的下标位置) vertical-align:super(升高元素的基线到父元素合适的上标位置) vertical-align:bottom(把对齐的子元素的底端与行框底端对齐) vertical-align:text-bottom(把元素的底端与父元素内容...

nth-child的属性和用法

在nth-child(n)中这里的n可以是关键词,even表示选取的是偶数,odd表示选取的是奇数 如:odd选的是奇数 li:nth-child(odd){ background-color: #7FFFD4; } 如:even选的是偶数 li:nth-child(odd){ background-color: #7FFFD4; } 如: 5n就是5个选一次进行操作 li:nth-child(5...