一、transition–过渡
transition: property duration timing- function delay;
transition- property: 指定想要进行过渡的属性
transition- property: none|| all|| property
none: 没有属性过渡
all: 所有属性进行过渡 ( 默认)
property: 指定进行过渡的CSS 属性
transition- duration: 指定过渡过程完成的时间
transition- duration: 0 || * s|| * ms
transition- timing- function : 指定过渡过程的变化曲线
transition- timing- function : linear|| ease|| ease- in || ease- out|| ease- in - out|| cubic- bezier ( n, n, n, n)
linear: 线性过渡,匀速
ease: 慢- 快- 慢
ease- in : 慢速开始
ease- out: 慢速结束
ease- in - out: 慢速开始慢速结束
cubic- bezier ( n, n, n, n) : 自定义贝塞尔曲线函数
transition- delay: 指定过渡效果等待开始执行的时间
transition- delay: 0 || * s|| * ms
二、transform–转换
transform: none|| transform- functions;
none: 默认值
transform- functions: 转换函数
transform转换函数
translate–平移 translateX(x) translateY(y) translateZ(z) translate3d(x,y,z) rotate–翻转 rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x,y,z,deg) skew–斜切 skew(x-deg,y-deg) skewX(deg) skewY(deg) scale–缩放 scale(x[,y]?) //—填一个值默认缩放XY scaleX(x) scaleY(y) matrix–矩阵 参照https://blog.csdn.net/weixin_42103959/article/details/81044389 perspective–为3D转换元素定义透视视图 transform-origin旋转圆点
transform- origin: x- axis y- axis z- axis;
transform–style属性指定嵌套元素是怎样在三维空间中呈现
transform- style: flat| preserve- 3 d;
三、animation函数
animation: name duration tming- function delay iteration- count direction fill- mode play- state;
// 开始-结束
@keyframes animation-name {
from { } // 开始
to { } // 结束
}
// 分不同阶段进行
@keyframes animation-name {
0% { }
50% { }
100% { }
}
duration 动画经历的时间(s || ms) timing-function(linear || ease || ease-in || ease-out || ease-in-out || 贝塞尔曲线函数) 动画进行的曲线函数 delay 动画等待执行时间(s || ms) interation(number || infinite) 动画执行的次数 direction (boolean) 动画是否反向执行 fill-mode (none || forwards || backwards || both|initial || inherit)默认值none执行动画前不会应用任何样式-----很少用到 play-state: (paused || running) 指定动画运行和暂停
边框(阴影,圆角,图片)
box-shadow(v-shadow,h-shadow,blur,spread,color,inset)
border-radius(左上,右上,右下,左下)px || % border-image 边框图片
四、背景
background-size(length|percentage|cover|contain)
length: 背景大小 如(200 px 200 px)
percentage: 百分比 如(100 % 100 % )
cover: 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小-- 不变形,铺不满.
contain: 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小-- 不变形,铺满,显示不全.
background-origin: padding-box || border-box || content-box; background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
... . . 只设置一个值是另外一个值默认为center
x% y% -- 百分比
xpos ypos-- 具体值