基础知识三

Posted on

H5基础 与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

3.CSS3进阶属性
CSS3渐变（linear-gradient（线性渐变）、radial-gradient（径向渐变））

线性渐变

1
2
3
4
5
6
7
a{
	background: linear-gradient(30deg,#f80 0,#0f8 40%,#8f0 70%,#0ff);
}
.b{
	/*——rgba()IE9以上兼容,设置颜色和透明度*/
	background: linear-gradient(30deg,rgba(255,0,0,0),rgba(255,0,0,1));
}

径向渐变

1
2
3
4
.a{
	/*33%为中心点位置50px为扩散范围*/
	background: -webkit-radial-gradient(33% 33%,50px 50px,#f80 0,#0f8 30%,#8f0 60%,#0ff);
}

练习-使用渐变画出一个球体和渐变的圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			float: left;
			margin-right: 30px;
		}
		div:nth-child(1){
			width: 200px;
			height: 200px;
			background: -webkit-radial-gradient(30% 30%,100% 100%,#fff,#666,#000);
			border-radius: 50%;
			box-shadow: 3px 3px 10px #666;
		}
		div:nth-child(2){
			margin-top: 50px;
			width: 300px;
			height: 100px;
			background: linear-gradient(#000 0,#fff 30%,#000);
			border-radius: 20px;
			box-shadow: 3px 3px 10px #666;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

蒙版

这里的蒙版与Ps的效果相反，不熟悉的可以先去玩Ps的，不过最后记得把思路转过来！！以下栗子接好

1
2
3
4
5
6
7
{
-webkit-mask-image: url(mark01.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-clip: content;
-webkit-mask-origin: padding;
}

属性

1
2
3
4
5
蒙版图片：-webkit-mask-image: url()/gradient）;
蒙版重复：-webkit-mask-repeat: no-repeat repeat-x repeat-y;
蒙版定位：-webkit-mask-position
蒙版-webkit-mask-clip: content border padding;
-webkit-mask-origin: content border padding;

CSS3倒影（reflect）

1
2
3
4
.a{
	width: 450px;
	-webkit-box-reflect:right 10px linear-gradient(to right,transparent,black);
	}

CSS3过渡（transition)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.transition{
	width: 100px;
	height: 100px;
	background: red;
	float: none;
	clear: both;
	/*-webkit-transition: width 1s,height 1s 1s , background 1s 2s;
	transition: width 1s,height 1s 1s , background 1s 2s;*/
	-webkit-transition-delay: 1s;
	-webkit-transition-timing-function: cubic-bezier(.6,-0.33,.1,1.58);
	-webkit-transition-duration: 3s;
	}
.transition:hover{
	width: 500px;
	height: 500px;
	background: blue;
	}

/*透明字体1： 利用背景裁剪，在类里面写文字，文字颜色设为透明*/
.bg_transition{
	width: 600px;
	height: 100px;
	font-size: 100px;
	color: transparent;
	background: linear-gradient(90deg,#f80,#f08,#8f0,#8f0,#08f,#0f8);
	background-position: 0 0;
	-webkit-background-clip: text;
	transition: background-position 5s;
}
.bg_transition:hover{
	background-position: 1200px 200px;
}

/*透明字体2 ： 利用蒙版*/
div{
	width: 150px;
	height: 100px;
	background: linear-gradient(50deg,red,blue,orange,pink,yellow,green,gray);
	-webkit-mask-image:url(img/14.png);/*文字图片，文字部分要有颜色，文字以外部分为透明*/
	transition: 1s;
}
div:hover{
	background-position: -100px 0;
}

CSS3 3-2D-3D变形（transform）

1
2
3
4
5
6
7
transform：scale() ；缩放X Y
transform：translate() ；位移X Y
transform：rotate() ；旋转 X Y
transform：skew() ；倾斜X Y
transform-origin：；设置中心点
-webkit-perspective:500; 景深
-webkit-transform-style: preserve-3d; 转为3D

栗子

scale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 250px;
		height: 250px;
		border: 5px solid black;
		margin: 50px auto;	
		overflow: hidden;	
		transform: scaleX(2) scaleY(1.2);
	}
	img{
		transition: 0.5s;
	}
	div:hover img{
		transform: scale(1.2);
	}
	p{background: red;}
	</style>
</head>
<body>
	<div>
		<img src="img/1.jpg" alt="">
	</div>
	<p>我是P</p>
</body>
</html>

translate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 200px;
		height: 200px;
		background: red;
		margin: auto;
		position: relative;
		left: 100px;
	}
	p{
		width: 200px;
		height: 200px;
		margin: auto;
		/*translateX translateY translateZ*/
		transform: translate(100px,100px);
		background: blue;
	}
	</style>
</head>
<body>
	<div></div>
	<p></p>
	<span>我是SPAN</span>
</body>
</html>

rotate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		padding-top: 100px;
	}
	div{
		width: 200px;
		height: 200px;
		background: red;
		margin-left: 200px;
		margin-bottom: 10px;
	}
	.d1{
		transition:1s;
		transform: rotate(0deg) translate(0px);
	}
	.d1:hover{
		transform: rotate(50deg) translate(300px);
	}
	.d2{
		transition: 1s;
		transform: translate(0px) rotate(0deg);
	}
	.d2:hover{
		transform:translate(300px) rotate(50deg);
	}
	</style>
</head>
<body>
	<div class="d1">1</div>
	<div class="d2">2</div>
</body>
</html>

skew

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background: red;
		margin: 100px auto;
		transform: skewX(0deg);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

3d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		/*视角：距离观看的内容1000px*/
		-webkit-perspective:1000;
		/*转换为3D模式*/
		transform-style: preserve-3d;
	}
	div{
		transform-style: preserve-3d;
		width: 200px;
		height: 200px;
		background: red;
		margin: 100px auto;
		transform: rotateX(0deg) translateZ(101px);/*修改数值可以看到3d的旋转效果*/
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

练习-做一个立方体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	html{
		width: 100%;
		height: 100%;
	}
	body{
		width: 100%;
		height: 100%;
		background: black;
		-webkit-perspective:1000;
		-webkit-perspective-origin:50% 125px;
	}
	.wrap{		
		width: 200px;
		height: 200px;
		border: 5px solid black;
		position: relative;
		margin:50px auto;
		transform-style: preserve-3d;
		transition: 3s;
	}
	.wrap:hover{
		transform: rotateY(360deg) rotateX(360deg);
	}
	.wrap div{
		width: 200px;
		height: 200px;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 50px;
		text-align: center;
		line-height: 200px;
		color: white;
		opacity: 0.8;
	}
	
	.d1{
		background: red;
		transform: rotateX(90deg) translateZ(100px);
	}
	.d2{
		background: yellow;
		transform: rotateX(90deg) translateZ(-100px);
	}
	.d3{
		background: blue;
		transform: rotateY(90deg) translateZ(-100px);
	}
	.d4{
		background: green;
		transform: rotateY(90deg) translateZ(100px);
	}
	.d5{
		background: orange;
		transform: translateZ(-100px);
	}
	.d6{
		background: pink;
		transform: translateZ(100px);
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
		<div class="d5">5</div>
		<div class="d6">6</div>
	</div>
</body>
</html>

过渡

1
2
3
4
5
6
7
8
9
10
11
12
贝塞尔曲线：cubic-bezier.com/#.17,.67,.83,.67

transition：property（属性） duration（执行时间）  timing-function（过渡曲线） delay（延时）;

timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

inear        规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease        规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in        规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

小贴士

1
2
3
4
5
浏览器内核（标准样式不用加内核前缀）
-webkit- 谷歌和苹果
-moz- 火狐
-o- 欧朋
-ms- IE

动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
animation：property（属性） duration（执行时间）  timing-function（过渡曲线） delay（延时）    iteration-count(循环次数) direction（翻转动画轨迹） play-state（动画暂停） fill-mode（动画前后位置） steps(number)(分成number帧)

关键帧：
@-webkit-Keyframes ‘name’{
   from{属性：value；}
  percentage{属性：value；}
  to{属性：value；}
}

关键帧语法
@KEYFRAMES写法
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}

keyframes样例

1
2
3
4
5
6
@-webkit-keyframes 'wobble' {
0% { margin-left: 100px; background: green; }
40% { margin-left: 150px; background: orange; }
60% { margin-left: 75px; background: blue; }
100% { margin-left: 100px; background: red; }
}

animation属性

1
2
3
4
5
6
7
8
9
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (<number> , <number>, <number>, <number>)贝塞尔曲线
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义是不翻转动画轨迹*/
-webkit-animation-play-state:paused;/*定义动画的暂停*/
-webkit-animation-fill-mode:none | forwards | backwards | both;/*动画后位置*/

传说的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	.wrap{
		width: 400px;
		height: 400px;
		border: 5px solid black;
		position: relative;
	}
	.wrap div{
		width: 100px;
		height: 100px;
		background: red;
		position: absolute;
		left: 0;
		/*transition: 1s;*/
		animation: move 2s cubic-bezier(.76,-0.7,.35,1.46) 0s;
		animation-iteration-count: 2;
		animation-direction: alternate;
		
	}
	.wrap:hover div{
		/*left: 300px;*/
		animation-play-state: paused;
		/*animation-play-state: running;*/
	}
	@keyframes move{
		0%{
			left: 0;top:0;
		}
		25%{
			left:300px;top: 0px;
		}
		50%{
			left:300px;top: 300px;
		}
		75%{
			left:0px;top: 300px;
		}
		100%{
			left: 0px;top: 0;
		}
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div></div>
	</div>
</body>
</html>

帧动画的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{
		width: 32px;
		height: 35px;
		background: url(steps.png);
		animation:move 1s steps(3) infinite;/*分成3帧，每帧移动105px的距离*/
	}
	
	@keyframes move{
		from{
			background-position: 0 0px;
		}
		to{
			background-position: 0 -105px;
		}
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

引用字体包

1
2
3
font-spider.org/     字蛛，中文字体压缩器

安装字蛛 npm install font-spider -g（Mac系统需要加权限 sudo npm install font-spider -g ，需要电脑密码）
1
2
3
4
5
6
7
8
9
10
11
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

终端压缩 到达文件路径后进行压缩 font-spider ./demo/*.html

图标字体库

1
fontawesome.dashgame.com/

调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
		<title></title>
		<style type="text/css">
			div:before{
				font-size: 120px;
			}
		</style>
	</head>
	<body>
		<div class="fa fa-bell fa-5x"></div><br />
		<i class="fa fa-camera-retro fa-lg"></i> 
		<i class="fa fa-camera-retro fa-2x"></i>
		<i class="fa fa-camera-retro fa-3x"></i>
		<i class="fa fa-camera-retro fa-4x"></i> 
		<i class="fa fa-camera-retro fa-5x"></i>
		<i class="fa fa-spinner fa-spin"></i> <!--旋转图标-->
	</body>
</html>

小贴士

显示Mac系统文件夹目录（终端输入）

defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder

CSS3 分栏（适用于：报纸类、文字类）

栏数控制 column-count

栏间距 column-gap

栏宽度 column-width

是否跨栏显示 column-span all/none

1
2
3
4
5
6
语法：columns

column-width：数值        每栏宽度
column-span:all/none      跨栏显示
column-gap :normal/数值    每栏间距
column-count：数字    分栏数目

栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap{
				/*-webkit-column-width: 200px;*//*每栏宽度*/
				-webkit-column-count: 3;/*分栏数量   如果存在column-width并且宽度不足时，不会分成3栏*/
				-webkit-column-gap: 50px;/*每栏间距 会影响分栏数目*/
				/*分栏的分割线*/
				-webkit-column-rule-color: black;/*颜色*/
				-webkit-column-rule-width: 5px;/*宽度*/
				-webkit-column-rule-style: solid;/*样式*/
				/*-webkit-column-rule: 5px solid black;*/
			}
			h2{
				-webkit-column-span: all;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<h2>1213456</h2>
			<p>dsdsfdsfdsfcd双方的师傅的说法是非常cfdsfdsfdsf所否是宣传宣传否是宣传宣传得税法是否是宣传宣否是宣传宣传否是宣传宣传传v</p>
			<p>否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣否是宣传宣传否是宣传宣传传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传</p>
		</div>
	</body>
</html>

CSS3 自适应布局

1
2
3
4
5
6
7
8
flew-box:弹性布局（IE9以上，手机端部分浏览器有bug）
display：box；转变属性
box-orient 子元素排列方式（水平垂直，默认水平排列每个子元素占据一列）
box-direction 排列顺序
box-flex子元素分配空间(类似分蛋糕，计算同级的蛋糕数量，用剩余宽度除以数量再分配)给子元素设置）
box-ordinal-group 子元素的显示顺序（给子元素设置）
box-anlign 子元素的垂直对齐方式
box-pack  子元素的水平对齐方式

来颗栗子压压惊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
			}
			body{
				height: 100%;/*要做全屏时，需要给html和body的height：100%；*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			.header{
				display: -webkit-box;
				/*-webkit-box-orient: vertical;*//*默认为水平排列*/
				height: 50px;/*子元素与父级一样高，水平排列为100%高度，垂直排列为100%宽度*/
				
			}
			.header .logo{
				background-color: purple;
				/*-webkit-box-flex: 1;*//*不设置时为固定宽度*/
			}
			.header .nav{
				background-color: orange;
				/*width: 100%;*//*宽度为100%时和父级是一样高度 会超出，这里不用百分比*/
				-webkit-box-flex: 1;
			}
			.content{
				display: -webkit-box;
				-webkit-box-flex: 1;
			}
			.content .con1{
				background-color: pink;
				-webkit-box-flex: 3;
			}
			.content .con2{
				background-color: royalblue;
				-webkit-box-flex: 3;
			}
			.content .con3{
				background-color: lightblue;
				-webkit-box-flex: 1;
			}
			.footer{
				background-color: yellowgreen;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="logo">上左，宽高固定</div>
			<div class="nav">上右，高度固定，宽度自适应</div>
		</div>
		<div class="content">
			<div class="con1">中1</div>
			<div class="con2">中2</div>
			<div class="con3">中3</div>
		</div>
		<div class="footer">底</div>
	</body>
</html>

小栗子

1
2
3
4
5
6
7
8
9
<body>
	<div class="wrap">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
</body>

排列顺序

1
2
3
4
.wrap{
	display:-webkit-box;
	-webkit-box-direction: reverse;/*倒序排列 5 4 3 2 1*/
	}

显示顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap div:nth-child(1){
				-webkit-box-ordinal-group: 3;
			}
.wrap div:nth-child(2){
				-webkit-box-ordinal-group: 4;
			}
.wrap div:nth-child(3){
				-webkit-box-ordinal-group: 2;
			}
.wrap div:nth-child(4){
				-webkit-box-ordinal-group: 5;
			}
.wrap div:nth-child(5){
				-webkit-box-ordinal-group: 1;
			}

对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrap{
	width: 600px;
	height: 600px;
	border: 5px solid darkcyan;
	display: -webkit-box;
	-webkit-box-align: center;/*垂直居中 在vertical中显示为水平居中 start（默认） end*/
	-webkit-box-pack: center;/*水平居中 在vertical中显示为垂直居中 start end  justify（两端对齐，只有水平才有）*/
}
.wrap div{
	width: 100px;
	height: 100px;
	background: brown;
}