transition
基本写法
/* 过渡属性 可以指定 某一个 或者某一些 如果想要所有的都能够过渡 使用all即可 */
transition-property: width,height;
/* 持续时间 */
transition-duration: 2s;
/* 延迟时间 */
transition-delay: 1s,2s;
/* 过渡的动画线型
linear
ease-in
ease-out
...
实际开发的时候 不会使用transition来制作 太长的动画效果 所以 使用默认的即可
ease
*/
transition-timing-function: ease;
---------------------
复合写法
transition: width 1s 1s linear,
height 1s 2s ease,background-color 1s 3s;
tansform 3d
判断方向的方法：
x轴:从左往右
y轴:从上往下
z轴:从里向外;
旋转方向的判断 左手定则
大拇指 指向 旋转的 那个轴的方向
剩余的四根手指 弯曲的方向 就是旋转的方向
为了能够有 3d的 一个透视效果 需要为 旋转对象的 父元素 添加 透视属性
透视属性
设置的是 3d变换的元素 距离 浏览器的 距离
沿着Z轴缩放 看不出效果
.container{
border: 1px solid gray;
overflow: hidden;
/* 距离 浏览器 的距离 */
perspective: 1000px;
}
transform-style: preserve-3d
如果需要有3d的视觉，还需要添加transform-style: preserve-3d;
transform-origin: left center
这是控制transform变换的圆点
小技巧：
在3d中有时候需要看不到背面：
/* 设置 反面看不到 */
backface-visibility: hidden;12
demo:3d小盒子效果
TYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
/* 希望 3d效果明显一点 可以设置的小一些 越大 越不明显 */
perspective: 500px;
}
.box{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
position: relative;
transition: all 1s;
/* 将 3d变换的 父元素 添加一个属性 即可看到 3d的变换效果 */
transform-style: preserve-3d;
}
.box .item{
width: 100%;
height: 100%;
font-size: 150px;
text-align: center;
line-height: 200px;
font-weight: 900;
position: absolute;
}
.item:nth-child(1){
background: orange;
transform: rotateY(0deg) translateZ(100px);
}
.item:nth-child(2){
background: red;
transform: rotateY(180deg) translateZ(100px);
}
.item:nth-child(3){
background: blue;
transform: rotateY(90deg) translateZ(100px);
}
.item:nth-child(4){
background: pink;
transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(5){
background: green;
transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(6){
background: yellowgreen;
transform: rotateX(-90deg) translateZ(100px);
}
/* 设置过渡效果 */
.box:hover{
transform: rotateX(450deg) rotateY(450deg);
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
伸缩布局
2、各属性详解****
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
http://m.ctrip.com/html5/ 携程网手机端地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 900px;
height: 600px;
display: flex;
flex-direction: column;
}
div{
text-align: center;
line-height: 100px;
}
.tou{
line-height: 200px;
}
.one{
flex: 1;
background-color: coral;
display: flex;
}
.one1{
flex: 1;
border: 1px solid white;
}
.one2{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.one2 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.one2 div:nth-child(2){
flex: 1;
}
.one3{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.one3 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.one3 div:nth-child(2){
flex: 1;
}
.two{
flex: 1;
background-color: #1c94c4;
display: flex;
}
.two1{
flex: 1;
border: 1px solid white;
}
.two2{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.two2 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.two2 div:nth-child(2){
flex: 1;
}
.two3{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.two3 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.two3 div:nth-child(2){
flex: 1;
}
.three{
flex: 1;
background-color:forestgreen;
display: flex;
}
.three1{
flex: 1;
border: 1px solid white;
}
.three2{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.three2 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.three2 div:nth-child(2){
flex: 1;
}
.three3{
flex: 1;
border: 1px solid white;
display: flex;
flex-direction: column;
}
.three3 div:first-child{
flex: 1;
border-bottom: 2px solid white;
}
.three3 div:nth-child(2){
flex: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="one">
<div class="one1 tou">酒店</div>
<div class="one2">
<div>海外酒店</div>
<div>特价酒店</div>
</div>
<div class="one3">
<div>团购</div>
<div>民宿客栈</div>
</div>
</div>
<div class="two">
<div class="two1 tou">机票</div>
<div class="two2">
<div>火车票</div>
<div>特价机票</div>
</div>
<div class="two3">
<div>汽车票</div>
<div>专车租车</div>
</div>
</div>
<div class="three">
<div class="three1 tou">旅游</div>
<div class="three2">
<div>门票</div>
<div>目的地攻略</div>
</div>
<div class="three3">
<div>游轮旅行</div>
<div>定制旅行</div>
</div>
</div>
</div>
</body>
</html>