treansition-properl 设置过度的属性
treansition-duration 设置过度时间
treansition-timing-funcion 设置过度的运动方式
linear 匀速
ease 开始和结束慢速
ease-in 开始时慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(0.845,-0.375,0.215,1.335)
transition-delay 设置动画的延迟
transition:properly duration timing -function delay 同时设置四个属性
css3 transform 变换
translate(x,y) 设置盒子的位移
scale(x,y)设置盒子缩放
roate(dog) 设置盒子的旋转
skew(x-angle,y-angle) 设置盒子的斜切
perspective 设置透视距离
transform-styoleflat :preserved-3d设置盒子是否按3d空间显示
translateX translateY translateZ 设置三维移动
rolateX rolateY rolateZ 设置三维的旋转
scaleX scaleY scaleZ 设置三位缩放
tranform-origin 设置变形的中心点
backface-visiblity 设置盒子的背面是否可见
animation动画
通过@keyframes 变量名{
盒子的初始大小
form{}
盒子变换后的大小
to{}
css‘设置某一个叫的圆角:
border-top-left-radius: 30px 60px;
css阴影
可以设置 水平偏移 垂直偏移 羽化大小 拓展大小 颜色 内阴影或者外阴影
box-shadow h-shadow 水平偏移
box-shadow v-shadow 垂直偏移
box-shadow blur 羽化大小
box-shadow spread 扩展大小
box-shadow color 颜色
box-shadow inset 是否内阴影