0524车玉霞
日志
一、知识总结
1、transform属性
none：不转换
translate（x,y）:2D转换移动
translate3d(x,y,z):3D转换移动
scale(x[,y]) : 2D 缩放转换
scale3d(x,y,z) : 3D 缩放转换
rotate3d(x,y,z,angle) : 3D 旋转
2、transition 的属性
（1）transition-property：名称、效果
（2）transition-duration transition：效果完成时间
（3）transition-timing-function ：transition效果的转速曲线
（4）transition-delay ：效果的开始
3、动画
animation-name ：选择器关键帧名称
animation-duration ：动画完成的时间
animation-timing-function ：动画的一个周期
animation-delay ：动画开始前的延迟间隔
nimation-iteration-count：动画播放次数
infinite： 无限次
animation-direction ：是否轮流反向播放动画
animation-play-state ：动画正在运行或已暂停
实例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
border: 1px soid;
background-color: #6495ED;
}
.div0 {
float:left;
width: 200px;
height: 100px;
border: 1px soid;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div0"><p>每个分析的统计量是根据分析中的每个变量的值都不缺失或超出范围的案例计算的。用户定义的缺失值将作为缺失对待。
每个分析的统计量是根据分析中的每个变量的值都不缺失或超出范围的案例计算的。</p>
</div>
</body>
4、排版（布局）
正常布局流属性
float:浮动（多列布局）
实例：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#heart{
width: 200px;
height: 200px;
background-color: plum;
margin: 400px auto;
position: relative;
transform: rotate(45deg);
}
#heart:before{
content: "";
position: absolute;
left:-100px;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: plum;
}
#heart:after{
content: "";
position: absolute;
top:-100px;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: plum;
#heart{
width: 200px;
height: 200px;
background-color: plum;
margin: 400px auto;
position: relative;
transform: rotate(45deg);
}