h5-17

上网搜　　flex-shrink和flex-grow

1、transition过度

 1     <style>
 2         div {
 3             width: 100px;
 4             height: 100px;
 5             background: red;
 6             transition: width 2s 2s;
 7         }
 8         div:hover{
 9             width:300px;
10         }
11     </style>

<!--
    transition: 过渡

        transition-property: 参与过渡的属性——默认 all 所有

        transition-duration:过渡持续时间
            s秒   ms毫秒
            1s=1000毫秒

        transition-delay:过渡延迟的时间
            s秒   ms毫秒
            1s=1000毫秒

        transition-timing-function: 时间函数（过渡的动画类型）
            linear 匀速
            ease-in加速
            ease-out减速
            ease 缓动
            ease-in-out 先加速后减速
-->
<div></div>

兼容（与上述css代码作用相同，起兼容作用）

 1     <style>
 2         /*
 3            浏览器私有前缀
 4            有的老版本浏览器为了提前实现css某些功能有自己实现的方式
 5         */
 6         div {
 7             width: 100px;
 8             height: 100px;
 9             background: red;
10             -webkit-transition: width 2s; /*chrome safari*/
11             -moz-transition: width 2s; /*ff*/
12             -ms-transition: width 2s; /*ie*/
13             -o-transition: width 2s; /*opera*/
14             transition: width 2s; /*标准属性 一般新的版本浏览器*/
15         }
16         div:hover{
17             width:300px;
18         }
19     </style>

多组值

 1     <style>
 2         div{
 3             width:100px;
 4             height:100px;
 5             background:red;
 6             transition-property:width,height;
 7             transition-duration:1s,2s;
 8             transition-timing-function:linear,ease;
 9         }
10 
11         div:hover{
12             width:300px;
13             height:300px;
14             background:yellow;
15         }
16     </style>

<div></div>

2、 transform-2d

移动

 1     <style>
 2         .wrap {
 3             float: left;
 4             width: 500px;
 5             height: 300px;
 6             border: 1px solid;
 7         }
 8 
 9         .box {
10             width: 100px;
11             height: 100px;
12             background: red;
13             transition: 0.5s;
14         }
15 
16         .wrap:nth-child(1):hover .box {
17             transform: translate(200px, 100px);     /*水平，竖直*/
18         }
19 
20         .wrap:nth-child(2):hover .box {
21             transform: translate(200px);        /*水平*/
22         }
23 
24         .wrap:nth-child(3):hover .box {
25             transform: translateX(200px);       /*水平*/
26         }
27 
28         .wrap:nth-child(4):hover .box {
29             transform: translateY(200px);       /*竖直*/
30         }
31 
32     </style>

<!--
    transform:定义变换
        translate(x,y);位移
            两个值：水平 垂直方向位移
            一个值： 水平(x)

        translateX( )
        translateY( )
-->

<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

旋转

 1     <style>
 2         .wrap {
 3               float: left;
 4               width: 500px;
 5               height: 300px;
 6               border: 1px solid;
 7           }
 8 
 9         .box {
10             width: 100px;
11             height: 100px;
12             background: red;
13             transition: 0.5s;
14         }
15 
16         .wrap:nth-child(1):hover .box {
17             transform: rotate(30deg);
18         }
19 
20         .wrap:nth-child(2):hover .box {
21             transform: rotate(-30deg);
22         }
23     </style>

<!--
    transform:定义变换
        translate(x,y);位移
            两个值：水平 垂直方向位移
            一个值： 水平(x)

        translateX( )
        translateY( )

        rotate()
            角度 deg
            正值 ：顺时针旋转
            负值：逆时针旋转

-->

<div class="wrap">
    <div class="box">box</div>
</div>
<div class="wrap">
    <div class="box">box</div>
</div>

缩放

 1     <style>
 2         .wrap {
 3             position: relative;
 4             float: left;
 5             width: 500px;
 6             height: 300px;
 7             border: 1px solid;
 8         }
 9 
10         .box {
11             position: absolute;
12             left: 50%;
13             top: 50%;
14             margin: -50px 0 0 -50px;
15             width: 100px;
16             height: 100px;
17             background: red;
18             transition: 0.5s;
19         }
20 
21         .wrap:nth-child(1):hover .box {
22             transform: scale(2, 3);
23         }
24 
25         .wrap:nth-child(2):hover .box {
26             transform: scale(2);
27         }
28 
29         .wrap:nth-child(3):hover .box {
30             transform: scaleX(2);
31         }
32 
33         .wrap:nth-child(4):hover .box {
34             transform: scaleY(0.5);
35         }
36     </style>

<!--
    transform:定义变换
        translate(x,y);位移
            两个值：水平 垂直方向位移
            一个值： 水平(x)

        translateX( )
        translateY( )

        rotate()
            角度 deg
            正值 ：顺时针旋转
            负值：逆时针旋转

        scale(x,y)  定义2d缩放
             参数：缩放比率    大于1 放大   0-1之间 缩小
             两个值：水平 垂直方向缩放
             一个值： x,y轴方向同时缩放

         scaleX( )
         scaleY( )

-->

<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

倾斜

 1     <style>
 2         .wrap {
 3             position: relative;
 4             float: left;
 5             width: 500px;
 6             height: 300px;
 7             border: 1px solid;
 8         }
 9 
10         .box {
11             position: absolute;
12             left: 50%;
13             top: 50%;
14             margin: -50px 0 0 -50px;
15             width: 100px;
16             height: 100px;
17             background: red;
18             transition: 0.5s;
19         }
20 
21         .wrap:nth-child(1):hover .box {
22             transform: skew(30deg, 20deg);
23         }
24 
25         .wrap:nth-child(2):hover .box {
26             transform: skew(30deg);
27         }
28 
29         .wrap:nth-child(3):hover .box {
30             transform: skewX(30deg);
31         }
32 
33         .wrap:nth-child(4):hover .box {
34             transform: skewY(20deg);
35         }
36     </style>

<!--
    transform:定义变换
        translate(x,y);位移
            两个值：水平 垂直方向位移
            一个值： 水平(x)

        translateX( )
        translateY( )

        rotate()
            角度 deg
            正值 ：顺时针旋转
            负值：逆时针旋转

        scale(x,y)  定义2d缩放
             参数：缩放比率    大于1 放大   0-1之间 缩小
             两个值：水平 垂直方向缩放
             一个值： x,y轴方向同时缩放

         scaleX( )
         scaleY( )

        skew(x,y)  定义2d倾斜
             两个值：水平和垂直方向倾斜
             一个值： 水平(x)

         skewX( )
         skewY( )

-->

<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

中心

 1     <style>
 2         .wrap {
 3             position: relative;
 4             float: left;
 5             width: 500px;
 6             height: 300px;
 7             border: 1px solid;
 8         }
 9 
10         .box {
11             position: absolute;
12             left: 50%;
13             top: 50%;
14             margin: -50px 0 0 -50px;
15             width: 100px;
16             height: 100px;
17             background: red;
18             transition: 0.5s;
19         }
20 
21         .wrap:nth-child(1):hover .box {
22             transform-origin: left top;
23             transform: scale(1.5);
24         }
25 
26         .wrap:nth-child(2):hover .box {
27             transform-origin: left bottom;
28             transform: scale(1.5);
29         }
30 
31         .wrap:nth-child(3):hover .box {
32             transform-origin: right bottom;
33             transform: scale(1.5);
34         }
35 
36         .wrap:nth-child(4):hover .box {
37             transform-origin: center;
38             transform: scale(1.5);
39         }
40     </style>

<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>