1、animation （动画）
属性
设置动画名称
animation-name：change；设置动画时间
animation-duration：2s；设置动画次数
animation-iteration-count：3；
其中有个属性为infinite意思为无限循环设置动画延迟
animation-delay：3s；设置动画的方向与是否返程，值有：normal、reverse、alternate、alternate-reverse
animation-direction：alternate；速度
animation-timing-function：linear；
linear为匀速，还有ease-in设置动画结束的时候应用最后一帧的属性值:forwards;设置动画在延迟中应用第一帧的属性值（backwards）；如果两个效果都需要，则使用（both）
animation-fill-mode：both；-
设置动画暂停（paused）与播放（running）
animation-play-state：running；实例
<style>
@keyframes anitname{
0%{
left:0;
}
50%{
left:100px;
}
100%{
left:0;
}
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 0;
animation: anitname 3s infinite;
}
</style>
如何引入animate.css库
- 进入github中搜索库名下载
- 然后将库引入
<link rel="stylesheet" href="animate.css" >
- 在标签中直接应用
<p class="animated rubberBand">测试文字</p>
2.column 多列布局
- column-count 设置几列布局
column-count：3； - column-width：设置列宽
column-width：5em； - columns 符合形式优先使用较少列数的设置项
column：2 20em； - column-gap 设置列之间的间隙
column-gap：3em；
考虑兼容性
-webkit-column-gap: 3em;谷歌兼容
-moz-column-gap: 3em;火狐兼容
-ms-column-gap: 3em;IE兼容
- 设置列之间的间隙样式
column-rule-color：blue；
column-rule-width：1px；
column-rule-style：dashed；
- 符合样式
column-rule: 1px solid red;
- 指定元素跨越所有的列
column-span: all;
3.border-radius
- border-radius可以轻松的给元素设置圆角效果
border-radius: 50%;
- border-radius的值做多可以写8个值，分别代表：上左、上右、下右、下左 / 左上 右上 右下 左下
注意写8个值的时候，前4个值和后4个值之间要用 / 分隔
通常写4个值就够了，也可以写1个或者2个。
4.box-shadow 盒子阴影
盒子设置阴影
四个值：第一个：X轴的偏移：第二个：Y轴的偏移；第三个：阴影的模糊程度；第四个：颜色
box-shadow: 10px 10px 10px blue;
- inset可以设置内阴影
box-shadow: inset 10px 10px 10px blue;
- 阴影值可以写多个，直接写在一起，中间用逗号分隔
text-shadow: 10px 10px 10px red,0 0 20px blue;
