弹性布局、动画、过渡

时间:2022-06-01 14:05:59

1.弹性布局

1.1 弹性容器:

元素上设置了display:flex;的元素就是弹性容器

1.2 弹性子元素:

元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。

语法:display:flex;

1.3 主轴分布的设置:

justify-content

 flex-start

 flex-end

 center

 space-around:平均分布,两边有间距,两边的间距是中间的一半

 space-between:平均分布,两边没有间距

 space-evenly:平均分布,间距一样

1.3 侧轴分布的设置:

stretch:拉伸,会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果

 flex-start

 flex-end

 center

换行

语法:flex-warp:warp

1.4 多行分布的设置:

align-content:

 flex-start

 flex-end

 center

 space-around:平均分布,两边有间距,两边的间距是中间的一半

 space-between:平均分布,两边没有间距

 space-evenly:平均分布,间距一样

 

 

Flex:数字;

 

对弹性子元素进行排序

 

 order:数字

 

 根据order的数字,进行从小到大排序

剩余空间的占据:

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.parent{

width: 100%;

height: 800px;

margin: 0 auto;

border: 1px solid #000;

 

 

/*设置弹性容器*/

display: flex;

 

}

 

.db{

flex: 1;

background: yellow;

}

.c1{

/*占据剩余空间的1*/

flex: 2;

background: green;

}

 

.c2{

background: purple;

width: 100px;

}

 

 

</style>

</head>

<body>

<div class="parent">

<!--db占据剩余空间3份中的1-->

<div class="db"></div>

<!--c1是主要内容,占据剩余剩余空间3份中的2-->

<div class="child c1"></div>

<!--假设c2是广告位,占100px宽度-->

<div class="child c2"></div>

 

</div>

</body>

</html>

 

 

2.动画

Animation:动画

综合设置语法:animation: donghua 4s infinite;

分别设置:

/*动画*/

/*animation: donghua 5s;*/

/*动画的名称*/

animation-name: donghua;

/*一次动画所花费的时间*/

animation-duration: 3s;

/*动画的速度*/

animation-timing-function: linear;

/*动画延迟时间*/

animation-delay: 3s;

/*设置动画的次数*/

animation-iteration-count: 3;

/*设置动画的往返*/

animation-direction: alternate;

/*保留最后一刻状态*/

animation-fill-mode: forwards;

分别设置:

不同状态写在关键帧里

@keyframes donghua{

0%{

transform: translate(0,0);

}

50%{

transform: translate(500px,0);

}

100%{

transform: translate(500px,500px);

}

}

 

3.Transition过渡

 

综合设置:

 

transition: all 2s;

 

分别设置:

/*过渡效果*/

/*transition:height 2s,transform 3s,background 2s;*/

/*transition: all 2s linear;*/

/*过渡的属性*/

transition-property: all;

/*过渡所消耗的时间*/

transition-duration: 2s;

/*过渡变化的速度

 linear线性速度

 ease/ease-in/ease-out

 cubic-bezier(0.57,-0.34, 0.37, 1.44)

 * */

transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44);

/*过渡的延迟时间*/

/*transition-delay: 2s;*/

4.转换

2D转换

4.1 二维平面移动

语法:

transform:translateX(移动的距离) translateY(移动的距离);

Transform:translate(水平移动距离,垂直移动距离)

可以设置负值,水平的正值是向右移动,垂直的正值是向下移动

4.2 二维平面旋转

语法:

Transform:rotate(30deg);

旋转原点的设置

 transform-origin:center(默认值)

 可以设置left,top,right,bottom,center,

 百分比设置:transform-origin:水平位置的百分比 垂直位置的百分比

 

 

4.3 3D转换

 

透视点

 

在所看元素的父元素或者是祖先元素上设置透视点

 

语法:perspective: 1000px;

 

三维立体的移动

语法:

transform: translateZ(200px);

transform: translate3d(水平移动,垂直移动,z轴移动);

z轴:z轴垂直于屏幕,方向是射向我们。

 

三维立体的旋转

 

语法:

 

/*transform: rotateX(30deg);*/

 

/*transform: rotateY(30deg);*/

 

/*transform: rotateZ(30deg);*/

 

transform: rotate3d(1,1,1,30deg);

 

解析:rotate3d(x,y,z,30deg),x,y,z建立一个用原点射向(x,y,z)这个坐标的向量,用这个向量作为轴进行旋转。

 

缩放

 

语法:

 

transform:scale(整体放大的倍数)

 

Transform:scale(水平缩放的倍数,垂直缩放的倍数)

 

倾斜

 

语法:transform: skew(15deg,0deg);

 

小技巧:如果先要文字板正,那么反倾斜即可

 

案例:

 

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#d1{

width: 300px;

height: 300px;

background: green;

margin: 0 auto;

 

/*倾斜*/

transform: skew(15deg,0deg);

}

 

h1{

transform: skew(-15deg,0deg);

}

</style>

</head>

<body>

<div id="d1">

<h1>helloworld</h1>

</div>

</body>

</html>

 

5.响应式

移动端:手机/平板/智能电视/智能手表/VR设备/AR设置

 

视窗viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

 

width=device-width width等于设备的系统显示宽度

initial-scale=1 :后面4个最终决定不允许任何的缩放。

minimum-scale=1

maximum-scale=1

user-scalable=no

 

一套设计稿解决手机端的屏幕大小不一致问题

<meta name="viewport" content="width=750,user-scalable=no" />

 

 

响应式:

不同的屏幕的大小,显示不一样的内容。

手机端:背景蓝色

手机的显示分辨率:一般小于640px

平板:深蓝色

平板的分辨率:一般是大于640px,小于960px

Pc:黑色