css的一些总结2

列表样式

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简写规则是 名字 过渡时间  延迟时间 

 

转载于:https://www.cnblogs.com/zhiwudenengliang/p/5770693.html