列表样式
1.list-style 头部图案 比如:disc实心圆 circle空心圆等
2.list-style-image 自定义头部图案 比如:url(a.jpg)
变形样式(下面是真的要复制黏贴了)
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
transform:translate(50px,200px); /* 最好有前缀 */
transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。
translateX(): 指定对象X轴(水平方向)的平移
translateY(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义
transform: rotate(45deg); transform-origin:60% 10%;
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
-moz-transform:scale(1,1.5); /* 貌似是倍数 */
skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
-moz-transform:skew(30deg,0deg); /* deg是指度数 */
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
-moz-transform:translate3d(30px,60px,20px);/* 我真的搞不懂跟2d平移有什么区别*/
过渡动画(!记得要先申明初始状态和最终状态)
1.transition-property 要过渡的属性 比如: transition-property:all(全部属性); 或者 transition-property:width,height;
2.transition-duration 过渡的时间 比如 :transition-duration:.5s ; 0.5s或者 5s
3.transition-timing-function:过渡函数(速度曲线) 比如:
ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
4.transition-delay 过渡延迟时间 比如.1s或者1s
transition简写规则是 前面的秒数是过渡时间 后面的是过渡延迟时间 除此之外没有限制
自定义动画
1.animation-name 动画(关键帧 当动画播完以后会回归原来状态)名称 比如:aaa bbb(不要用空格和-)
2.@keyframes 关键帧(前缀是@-moz-keyframes这样的)比如:
@keyframes kkk{
0%{color:#000;}
50%{color:#0f0}
100%{color:#ff0;}}
或者:
@keyframes hhh{ from {left: 0; } to {left: 800px; } }
3.animation-duration 动画时间 比如.3s 2s
4.animation-timing-function 动画过渡速度曲线 值同上
5.animation-delay 动画延迟时间 比如:.1s 或者1s
6.animation-iteration-count 动画执行次数 比如2 (2次) infinite(不断重复)
7.animation-direction 动画播放顺序 比如:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
8.animation-play-state 动画状态 比如running运动 或paused暂停
9.animation-fill-mode 动画时间之外的状态 比如:
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
animation简写规则是 名字 过渡时间 延迟时间