css3动画keyframes css常用布局

浅浅的花香味﹌ 2021-09-18 12:32 532阅读 0赞

## ** keyframes**  ##

## **有兼容性    -webkit-    -moz-   -0-   -ms-** ##

## **要定义属性名称    名称** ##

## **结合过渡一起使用  ** ##

过渡完成时间(S)     缓冲描述 (linear 匀速     ease非匀速 )   延迟时间;(如果是0秒也必须设置单位)

## **动画次数  ** infinite ##

## **补全反方向动画  ** alternate ##

## **保存最后一帧的状态 **  forwards ##

1.box {
    		width: 200px;
    		height: 200px;
    		background-color: lightblue;
    		/*调用动画
                    1参数:  定义寻找动画名称
                    2参数:  一次动画完成时间，单位是s
                    3参数:  缓冲描述，linear  ease
                    4参数:  延迟时间
    		5参数：动画的次数，infinite无限次
    		6参数： 补全反方向动画alternate
    		7参数： 保持最后一帧状态forwards
    
    		*/
    		-webkit-animation: donghua 1s linear 3s 3 alternate forwards;
    	}	
    
    
    
    
    
    
    /*定义动画*/  from to状态
    2	@-webkit-keyframes donghua {
    3		/*开始状态*/
    4		from {
    5			width: 200px;
    6			background-color: lightblue;
    7		}
    8		/*结束状态*/
    9		to {
    10			width: 600px;
    11			background-color: red;
    12		}13	}
    
    
    
    
    
    /*定义动画*/  百分比状态
    	@-webkit-keyframes donghua {
    		0% {
    			width: 0px;
    			height: 0px;
    			background-color: green;
    		}
    		50% {
    			width: 400px;
    			height: 400px;
    			background-color: orange;
    		}
    		100% {
    			width: 600px;
    			height: 500px;
    			background-color: blue;
    		}
    	}

以谷歌和苹果为例子

**动画暂停**

**play: 播放**

**state:状态**

**paused:暂停     结合 hover一起使用**

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> 
    <ol> 
     <li>-webkit-animation-play-state: paused;</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

# **布局** #

## **         垂直居中** ##

## **        水平居中**  ##

## **         弹性布局**  ##

**   **

//html部分同上
    .parent {
      display:flex;
    }  
    .right {
      margin-left:20px; 
      flex:1;
    }

## **        单列布局 header、content、footer **  ##

**   **

<div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
    
    
    .header{
        margin:0 auto; 
        max-width: 960px;
        height:100px;
        background-color: blue;
    }
    .content{
        margin: 0 auto;
        max-width: 960px;
        height: 400px;
        background-color: aquamarine;
    }
    .footer{
        margin: 0 auto;
        max-width: 960px;
        height: 100px;
        background-color: aqua;
    }

## **       二列布局**  ##

如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。

## **   **  ##

.parent {
      overflow: hidden;
      zoom: 1;
    }
    .left {
      float: left;
      margin-right: 20px;
    }
    .right {
      overflow: hidden;
      zoom: 1;
    }

均分：
    1	.box {
    2		width: 100%;
    3		overflow: hidden;
    4	}
    5	.box p {
    6		/*浮动和标准流 百分比含义相同*/
    7		float: left;
    8		width: 50%;
    9		height: 200px;
    10		background-color: green;
    11	}
    12	.box p:last-child {
    13		background-color: red;14	}

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][] ##

## **       三列布局**  ##

## **      圣杯布局**  ##

## 圣杯模型 ##

三个元素并排显示，高度不同，最高盒子撑高父盒子，其他盒子最终渲染高度也和最高盒子相同

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

开始三个盒子高度各不相同。

.box p {
        /*三个元素并排显示  浮动*/
        float: left;
        width: 20%;
        height: 200px;
        background-color: green;
    }
    .box .no1 {
        /*利用padding-bottom拉长盒子*/
        padding-bottom: 500px;
        /*利用Mgb负值让盒子变矮*/
        margin-bottom: -500px;
    }
    .box .no2 {
        /*三个元素height 不同*/
        width: 50%;
        height: 400px;
        background-color: orange;
        /*no2利用padding拉长  >= 最高-自身高度*/
        padding-bottom: 1000px;
        /*拉回相同数值*/
        margin-bottom: -1000px;
    }
    .box .no3 {
        width: 30%;
        height: 600px;
        background-color: pink;
    }

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]**     ** 最终显示效果高度相同。 ##

# #

## **双飞翼布局** ##

双飞翼布局
    左右两侧盒子宽度固定值，中间盒子宽度自适应。
    浮动：mg相对于上一个浮动元素位置偏移。
    1	//结构
    2	
    3	<div class="container">
    4		
    5		<div class="main">自适应</div>
    6	</div>
    7	<div class="left">left</div>
    8	<div class="right">right</div>
    9	//样式
    10	.container {
    11		/*左浮动 宽度通栏*/
    12		width: 100%;
    13		float: left;
    14		height: 300px;
    15		background-color: #eee;
    16	}
    17	.container .main {
    18		/*标准流*/
    19		/*不设置宽度的盒子 mg占有位置  利用Mg将左右两个盒子的位置挤出来*/
    20		margin: 0 210px;
    21		height: 300px;
    22		background-color: green;
    23	}
    24	/*同级元素要浮动都浮动container left  right*/
    25	.left {
    26		float: left;
    27		width: 200px;
    28		height: 300px;
    29		background-color: orange;
    30		/*利用mgl负值将该盒子移动到container最左侧   拉回一个屏幕宽度*/
    31		margin-left: -100%;
    32	}
    33	.right {
    34		/*也是左浮动*/
    35		float: left;
    36		width: 200px;
    37		height: 300px;
    38		background-color: pink;
    39		/*right元素在container  最右侧  拉回自身宽度*/
    40		margin-left: -200px;41	}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3][]

*百分比布局*

*标准流，浮动：*

*width: 表示相对于父盒子内容宽比值*

*height: 表示相对于父盒子内容高比值*

*padding,margin：不管任何方向都是表示相对于父盒子内容宽比值*

*border:不能使用百分数*

绝对定位：

width: 表示相对于定位参考盒子(内容宽+padding)比值

height: 表示相对于定位参考盒子(内容高+padding)比值

padding,margin：不管任何方向都是表示相对于定位参考盒子(内容宽+padding)比值

border:不能使用百分数

百分比布局
    * {
    		padding: 0;
    		margin: 0;
    	}
    	ul, ol {
    		list-style: none;
    	}
    	a {
    		text-decoration: none;
    		color: #000;
    	}
    	.box1 {
    		/*父盒子使用px*/
    		width: 300px;
    		height: 400px;
    		padding: 50px;
    		border: 20px solid #000;
    	}
    	.box1 p {
    		/*标准流和浮动*/
    		/*width:相对于父盒子内容宽比值*/
    		width: 50%;
    		/*height: 相对于父盒子内容高比值*/
    		height: 20%;
    		/*padding,margin 相对于父盒子内容宽比值*/
    		padding: 10%;
    		margin: 10%;
    		background-color: red;
    	}
    	.box2 {
    		/*父盒子使用px*/
    		width: 300px;
    		height: 400px;
    		padding: 50px;
    		border: 20px solid #000;
    		position: relative;
    	}
    	.box2 p {
    		/*绝对定位*/
    		position: absolute;
    		left: 0;
    		top: 0;
    		/*参考边框以内宽度  （300+50*2）* 50% = 200px*/
    		width: 50%;
    		/*参考边框以内高度比值*/
    		height: 20%;
    		/*padding,margin 边框以内宽度比值*/
    		padding: 10%;
    		margin: 10%;
    		background-color: green;
    	}
    
    	
    	</style>
    </head>
    <body>
    	<div class="box1">
    		<p>son</p>
    	</div>
    	<div class="box2">
    		<p>绝对</p>
    	</div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210812/ecafd261db3a4f0dbbc542e450b9f6fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210812/ffcf561e6eb242428b310e7b0e150716.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210812/e37b47b9e29f4080a7f2d940d831add6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 3]: /images/20210812/bf615d431602419daa221f638543802d.png