css边框图片
border-image: url(路径) ;
border-image-slice: 切图大小 上右下左顺序;
border-image-width: 边框图片宽度;
border-image-repeat: repeat平铺 round铺满 stretch拉伸;
css2D
一般搭配动画或鼠标或键盘事件来使用
transform :translate / robate / scale 不会影响其他盒子
移动 translate (可以是px也可以是百分比)
旋转 robate(单位是deg)
缩放 scale (倍数)
transform-origin: ; 默认x,y的50%,可以设置像素或方位词修改中心点
css动画
动画结合2D来进行
1.定义动画
@keyframes 动画名称 {
开始状态
form=0% 等同于开始 {
transform: translateX(0px);
}
中间可以设置多个节点
.....{
移动位置
}
结束状态
to =100% 等同于结束 {
transform: translateX(1000px);
}
}
2.调用动画
需要动画的标签 {
animation-name: 动画名称;
其他动画的属性...
}
animation-timing-function 默认ease 运动曲线
linear 匀速
ease 开低 快 尾低
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
steps()指定数量(步数)
animation:秒数 steps(步数)
animation-delay 默认0 动画何时开始
animation-iteration-count 默认1 动画播放次数 还有infinite
animation-direction 默认normal 动画是否在下一周期逆播放alternte
animation-play-state 默认running 动画是否正在运行或暂停 paused
animation-fill-mode 动画结束后状态 forwards保持 backwards回到原点
css3D
基本不用