html之css新特性，过渡动画，动画，弹性布局，响应式

1转换

2D转换

二维平面移动

语法：

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

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

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

二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

 transform-origin:center(默认值)

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

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

 

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);

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

案例：

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #d1{
 8                 width: 300px;
 9                 height: 300px;
10                 background: green;
11                 margin: 0 auto;
12                 
13                 /*倾斜*/
14                 transform: skew(15deg,0deg);
15             }
16             
17             h1{
18                 transform: skew(-15deg,0deg);
19             }
20         </style>
21     </head>
22     <body>
23         <div id="d1">
24             <h1>helloworld</h1>
25         </div>
26     </body>
27 </html>

 

 

2 过渡动画

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;*/

 

3 动画

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;

 

4 弹性布局

弹性容器：

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

弹性子元素：

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

语法：display:flex;

 

主轴分布的设置：

 

justify-content:(前缀)

 

 flex-start

 

 flex-end

 

 center

 

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

 

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

 

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

 

 

侧轴分布的设置：

 

align-items:（前缀）

 

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

 

 flex-start

 

 flex-end

 

 center

 

换行

语法：flex-warp:warp

 

多行分布的设置：

 

align-content:（前缀）

 

 flex-start

 

 flex-end

 

 center

 

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

 

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

 

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

 

 

剩余空间的占据：

 

Flex:数字；

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             .parent{
 8                 width: 100%;
 9                 height: 800px;
10                 margin: 0 auto;
11                 border: 1px solid #000;
12                 
13                 
14                 /*设置弹性容器*/
15                 display: flex;
16                 
17             }
18                 
19             .db{
20                 flex: 1;
21                 background: yellow;
22             }
23             .c1{
24                 /*占据剩余空间的1份*/
25                 flex: 2;
26                 background: green;
27             }
28             
29             .c2{
30                 background: purple;
31                 width: 100px;
32             }
33             
34             
35         </style>
36     </head>
37     <body>
38         <div class="parent">
39             <!--db占据剩余空间3份中的1份-->
40             <div class="db"></div>
41             <!--c1是主要内容，占据剩余剩余空间3份中的2份-->
42             <div class="child c1"></div>
43             <!--假设c2是广告位，占100px宽度-->
44             <div class="child c2"></div>
45             
46         </div>
47     </body>
48 </html>

 

 

对弹性子元素进行排序

 order:数字

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

 

5 响应式

 

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

 

视窗viewport（用于移动端，meta语句对于PC端无效）

<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" />

 

注意：meta对PC端不起作用

 

 

响应式：

 

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

 

手机端：背景蓝色

 

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

 

平板：深蓝色

 

平板的分辨率：一般是大于640px，小于960px

 

Pc：黑色

 

 1 <head>
 2         <meta charset="UTF-8">
 3         <title>响应式</title>
 4         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 5         <style type="text/css">
 6             .d1{
 7                 width: 500px;
 8                 height: 300px;
 9                 background: skyblue;
10                 margin: 100px auto;
11             }
12             
13             /*媒体查询*/
14             /*小于等于640px的分辨率*/
15             @media only screen and (max-width: 640px) {
16                 .d1{
17                     background: mediumvioletred;
18                 }
19             }
20             
21             /*范围在640px-960px之间*/
22             @media only screen and (min-width: 640px) and (max-width: 960px) {
23                 .d1{
24                     background: green;
25                 }
26             }
27             
28             
29             
30         </style>
31     </head>
32     <body>
33         <div class="d1">
34             
35         </div>
36     </body>

 

posted @ 2019-05-28 21:42  cowbe  阅读(705)  评论(0)  编辑  收藏  举报