【滑稽】每日一记——CCS3部分新增属性

 

 

长度单位：px、百分比、em、rem   具体见CSS3参考手册

图片边框、图片裁切

 

background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，content-box从文字内容区开始
background-origin不改变背景图显示区域大小，只决定左上角定位位置。
 background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，content-box从文字内容区开始显示 。不在显示区域内的背景图或背景色，会被裁切不显示
background-clip不改变定位位置，只是通过裁切显示部分区域。

 

以下属性没有示例图：

transform: 定义变换类型
属性值为变形函数
部分常用属性：translate 平移、scale 缩放 rotate旋转
同时使用多条属性时需要写在一起：
transform：translate（0px）transform：scale（1.5）；
属性分开写时下一条会覆盖上一条：
transform：translate（0px）；
transform：scale（1.5）；
transform:rotate(40deg)
此时只显示元素的缩放效果

transform-origion:元素变形的起点
属性值：left top center bottom right


transition：定义过渡效果
参与过渡的属性，可以单独指定某个CSS属性，也可以用all、none
过渡开始到过渡完成的时间：.3s .5s
过渡样式：常选ease 其他看参考文档或者百度
过渡开始前的延迟时间：可以省略，一般不会用

transition可以定多个过渡效果，之间用逗号分隔
例：transition：color .3s ease,border .5s ease-in

CSS3动画的使用:
1、首先声明一个动画（关键帧@keyframe）
(-webkit-)@keyframe name｛
阶段1｛｝
阶段2｛｝
｝
阶段：可以使用百分比表示0-100%，起止设置为0和100%或from和to

2、在CSS选择器中使用animation动画属性，调用声明好的关键帧

 

【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)

Animation-duration 动画持续时间

Animtaion-timing-function动画速度曲线 常选ease

Animtaion-delay 动画延迟时间

Animation-iteration-count 播放次数，默认为1，无限次Infinite

Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）

（不常用）animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）

>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……