页面制作

一：Photoshop操作

1.1 PS工具，面板，视图

首选项 – 单位与标尺 – 单位都改为像素（初始文字是点的）

面板 – 工具（默认）、选项（默认）、信息（F8，颜色、尺寸、位置等）、历史记录、图层

切图工具

  1. 移动（V），勾选自动选择，选到图层（默认组）一步到最终
  2. 选框（M），规则图形，默认矩形。ctrl + d – 取消；shift – 加到；alt – 减去；shift + alt – 交叉。套索（L）不规则。
  3. 魔棒（W），容差 – 颜色取样范围
  4. 裁剪切片（C）
  5. 缩放，ctrl + + – 放，ctrl + - – 缩，ctrl + 1 – 实际，ctrl + 0 – 屏幕
  6. 取色（I）

辅助视图

  1. 对齐，对齐到（默认全选了）
  2. 标尺（ctrl + r）
  3. 显示额外内容，参考线 – 从标尺拖拽出来

1.2 测量，取色

标签要测量的值

  1. 宽高
  2. 内外边距
  3. 边框
  4. 定位
  5. 字体大小
  6. 行高
  7. 背景图位置

标签要取色的值

  1. 边框
  2. 背景
  3. 文字

文字图层看字符段落属性面板

文字图片选框测量，（行高 – 上一行底部到该行底部的距离）

大图宽高，在一边先画个选区，在另一边添加（shift）个选区

文字填充效果，颜色不是纯色，用取色器

背景颜色，渐变色，魔棒（调整容差）确定

1.3 切图

切的部分

  1. 修饰 – background

    图标、logo

    特殊效果按钮、文字

    非纯色背景

  2. 内容 – img

    banner、advertising

    文章配图

切的存储

  1. 修饰 – PNG24（半透明，ie7+）、PNG8
  2. 内容 – JPG

切的方法

隐藏文字只留背景

  1. 文字图层，不展示文字
  2. 文字图片，背景拉伸覆盖文字（ctrl + t 自由变换）,背景移动覆盖文字（v 移动,alt 复制， 背景存在纹理）

切的保存PNG24

  1. 移动选到所需图层（ctrl 多选）
  2. 多图层先合并图层（ctrl + e）
  3. 右键复制图层到新文件

切的保存PNG8

  1. 合并可见图层（shift + ctrl + e）
  2. 选框选择
  3. 魔棒去除多余（alt）

切的保存平铺背景

  1. 选择小部分

切片工具

一刀切活动页

  1. 拉参考线
  2. 选切片
  3. 基于参考线的切片
  4. 选切片选择
  5. 命名、类型
  6. 保存（alt + shift + ctrl + s）

1.4 保存

复制 ctrl ＋c

剪切 ctrl + x

新建 ctrl + n

粘贴 ctrl + v

存储为web所用格式 ctrl + shift + alt + s

保存类型

  1. 色彩丰富，无透明，JPG，合适品质
  2. 色彩不丰富，PNG8，无杂边，无仿色
  3. 图片有透明，PNG24
  4. 每一份图片进行PSD备份副本

1.5 修改，维护

CSS精灵

  1. 扩大，更改画布大小，定位到左上角
  2. 变位，移动图标
  3. 减小，选区后裁剪

PNG8（索引颜色模式）

  1. 先更改为RGB颜色模式
  2. 再进行修改

1.6 优化与合并

Sprite拼图

多个小图标拼合为一张图

减少网络请求

大小质量

压缩工具

  1. 无损 Minimage
  2. 有损 TinyPng

排列

  1. 图片之间必须保留空隙
  2. 横向
  3. 纵向

分类

  1. 同一个模块，如一个组件的
  2. 大小相近，如圆形的按钮
  3. 色彩相近，如淡色的

推荐

  1. 只本页使用的图片
  2. 有状态的图标

兼容

  1. 需要透明，多一份PNG8_for_ie6
  2. 全面，新CSS3，旧切图
  3. 降级，新CSS3

1.7 技巧

常用图片处理方法

  1. 抠图

    精细抠–钢笔（P）描路径再转选区（ctrl+enter）,套索（L）来选区

  2. 蒙版

    剪贴模板–素材在上一层，目标形状在下一层，方法一：都选上，按alt；方法二：选素材，按alt + ctrl + g。

  3. 尺寸

  4. 格式

色彩使用技巧

色彩要素

色彩要素

色彩选择

色彩选择

色彩突出

色彩突出

字体字号及排版

有无衬线字体

有无衬线字体

不同部分字号

不同部分字号

对齐规则

不同部分字号

亲密规则

不同部分字号

常见banner问题及注意事项

怎么摆放

不同部分字号

氛围

氛围

颜色

颜色

字体

字体

文案

文案

无线端大小

无线端大小

二：开发调试

2.1开发工具

  1. 文本编辑器

    Sublime Text

    Notepad++

    EditPlus

  2. IDE（集成开发环境）

    WebStorm

    IntelliJ IDEA

    Eclipse

  3. Sublime

    Sublime快捷键

    插件

    SideBarEnhancements 在Sublime Text 2 需要手动安装

    DocBlockr Terminal

    vim编辑模式 – 将setting中的”ignored_packages”的”Vintage”去除

    vim编辑

    创建Snippets

2.2 调试工具

  1. 浏览器 - F12,ctrl+shift+i

    Elements html，css

    Console js

    Network 所有请求

    Sources 资源

    Resource 本地数据资源

    Timeline,Profiles,Audits 页面性能

  2. IE

    IETester

    Internet Explorer Developer Toolbar

三：HTML

3.1 构成

声明 – <!DOCTYPE html> – 首行顶格

头部 – <head> </head>

元信息 – <meta>

1
2
3
4
5
6
7
8
9
10
<head>
  <meta charset='utf-8'>
  <title>title</title>
  <meta name='keyword' content='keyword'>
  <meta name='description' content='description'>
  <meta name='viewport' content='width=device-width'>
  <link rel='shortcut icon' href='favicon.ico'>
  <link rel='stylesheet' href=''>
  <style></style>
</head>

主体 – <body>

3.2 语法

3.2.1 标签

元素 – < > – 闭合 – 属性 – 嵌套 – 缩进

全局属性 – id（页面唯一） – class – style – title（页面可显示）

标签

文档章节

3.2.2 超链接
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接</title>
  <style>
    iframe,#foot{
      border: 1px solid #333;
    }
    div{
      margin: 10px auto;
    }
    iframe{
      margin: 50px;
    }
  </style>
</head>
<body>
  <h3>链接到外部文档</h3>
  <a href="http://www.baidu.com" target="_blank">Baidu</a>
  <a href="http://www.sogou.com" target="inner">Sogou</a>
  <!-- <iframe src="" name="inner" frameborder="0"></iframe> -->
  <h3>创建内部锚点</h3>
  <a href="#foot">到底部</a>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quae nemo cum facilis alias accusantium asperiores explicabo facere magni veritatis, laborum voluptatibus minima modi temporibus doloremque possimus error ducimus deleniti!</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non suscipit quasi, rem laborum, dolor inventore repudiandae eius reprehenderit, minus minima, eligendi quod consequuntur animi repellat similique necessitatibus aut eaque nulla.</div>
  <div>Quia sed impedit dolor magni pariatur dignissimos harum amet molestias similique, error cum aliquam expedita repellendus eaque culpa numquam nostrum quo iste, facere laudantium excepturi nesciunt sequi facilis autem et?</div>
  <div id='foot'>Quo animi, impedit, a nam inventore natus rerum distinctio nobis illo fuga et illum. Porro officiis, at dolorum, dignissimos soluta labore tenetur! Fuga ratione facilis repellendus saepe repudiandae, odio natus!</div>
  <a href="#">到顶部</a><br>
  <a href="mailto:ps_recruiter@baidu.com">发邮箱到<strong>百度</strong></a><br>
  <a href="tel:10105777">10105777</a>
</body>
</html>
3.2.3 嵌入资源

嵌入对象

视频

音频

其他资源

3.2.4 表格

表格

3.2.5 表单

表单1

表单2

表单3

表单4

表单5

3.2.5 组合

div标签

1
2
3
4
5
6
7
8
9
10
11
<pre>
    <code>
    main(){
      printf('Hello');
      return 0; 
    }
    </code>
  </pre>
<blockquote cite="https://www.w3.org/wiki/HTML/Elements/blockquote">
  The &lt;blockquote&gt; element represents a quoted section.
</blockquote>
3.2.6 列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
  <li>Home</li>
  <li>About</li>
</ul>
<ol>
  <li>one</li>
  <li>two</li>
</ol>
<dl>
  <dt>title</dt>
  <dd>message</dd>
  <dd>message</dd>
  <dt>time</dt>
  <dd>10.15</dd>
</dl>
3.2.7 语义化

在恰当地方使用合适标签

作用

  1. SEO
  2. 可读性
  3. 可访问性
3.2.8 实体字符
HTML实体符号参考手册

四：CSS

4.1 定义

层叠样式表

页面表示

4.2 介绍

4.2.1 语法

selector{

​ /**/

​ property:value;

}

私有属性

-webkit-

-moz-

-ms-

-o-

属性构成

  1. 基本元素

    基本元素

  2. 组合符号

    空格

    &&

    ||

    |

    []

  3. 数量符号

    无

    +

    ?

    {}

    *

    #

    例子

规则

@规则

4.2.2 选择器

选择器

4.2.2.1 简单选择器

标签选择器

类选择器

  1. 由“.”在前头
  2. 字母、数字、_
  3. 字母开头
  4. 区分大小写
  5. 出现多次

id选择器

  1. 由“#”在前头
  2. 字母、数字、_
  3. 字母开头
  4. 区分大小写
  5. 出现一次

通配符选择器 – “*”

属性选择器

  1. [attr]
  2. [attr=value]
1
2
<input disabled type='text' value=''>
<input type='button' value=''>
1
2
[disabled]{color:#eee;}
[type=button]{color:#333;}
  1. [attr~=value]
1
2
3
4
<p class='title first'>
  lorem
</p>
<span class='first'>lorem</span>
1
[class~=first]{fort-size:18px;}
  1. [attr|=value] 以某值或者某值后跟_开头的属性值
1
2
3
4
5
6
7
8
9
10
11
12
<p lang='en'>
  lorem
</p>
<p lang='en-us'>
  lorem
</p>
<p lang='enfr'>
  lorem
</p>
<p lang='cy-en'>
  lorem
</p>
1
[lang|=en]{color: #00F;}
  1. [attr^=value] 以某值开头的属性值（该值带符号、空格的要由引号包裹）
1
2
<a href='#first'>first</a>
<a href='#second'>second</a>
1
[href^='#']{color: #999;}
  1. [attr$=value] 以某值结尾的属性值
1
2
3
<a href='#first'>first</a>
<a href='#second'>second</a>
<a href='#third'>third</a>
1
[href$=d]{color: #666;}
  1. [attr*=value] 包含某值的属性值
1
2
3
<a href='#first'>first</a>
<a href='#second'>second</a>
<a href='#third'>third</a>
1
[href*=i]{color: #eee;}
4.2.2.2 伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a:link{color: #f00;}
    a:visited{color: #0f0;}
    a:hover{color: #00f;}
    a:active{color: #efefef;}
  </style>
</head>
<body>
  <a href="javascrip:void(0)">空空</a>
  <a href="http://www.baidu.com">百度</a>
</body>
</html>

伪类选择器1

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    li:first-child{color: #f00;}
    li:last-child{color: #0f0;}
    li:nth-child(even){color: #eee;}
    li:nth-child(odd){color: #333;}
    li:nth-child(3n+1){color: #111;}
    li:nth-last-child(2n+1){color: #222;}
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
</html>

伪类选择器2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    dt:first-of-type{color: #f00;}
    dt:last-of-type{color: #00f;}
    dd:nth-of-type(even){color: #0f0;}
    dd:nth-last-of-type(2n){color: #333;}
  </style>
</head>
<body>
  <dl>
    <dt>hello</dt>
    <dd>world</dd>
    <dd>welcome</dd>
    <dd>good</dd>
    <dt>time</dt>
    <dd>1212</dd>
  </dl>
</body>
</html>

伪类选择器3

伪类选择器4

4.2.2.3 伪元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p::first-letter{color: #f00;};
    p::first-line{font-weight: bold;};
    span::before{content:'before';}
    span::after{content:'after';}
    span::selection{color: #ccc;}
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maiores dignissimos magnam a, expedita consequuntur aut eum officia sapiente odio totam dolorum eligendi.</p>
  <span>Numquam voluptatum sequi iusto! Explicabo ab, quibusdam!</span>
</body>
</html>
4.2.2.4 组合选择器

后代选择器1

后代选择器2

兄弟选择器1

兄弟选择器2

选择器分组

4.2.2.5 继承、优先级、层叠

继承

Inherited

继承1

继承2

继承3

优先级

priority

优先级1

优先级2

层叠

stack

层叠1

层叠2

层叠3

选择器兼容性说明

主流的浏览器基本都支持，IE低版本有较多的兼容问题，具体可查看：

选择器兼容性
4.2.3 文本
font-size

font-size

font-family

font-family

font-weight

font-weight

font-style

font-style

line-height

line-height

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>line-height</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
  p{margin:10px;background:#ddd;}
  p+p{margin-left:40px;}
  body{font-size:30px;}
  .m-demo{line-height:40px;}
  .m-demo p{background:#ddd;}
  .m-demo .p1{line-height:3em;}
  .m-demo .p2{line-height:300%;}
  .m-demo .p3{line-height:3;}
  .m-demo2{line-height:300%;} /*先计算再继承*/
  .m-demo2 p{background:#fbb;}
  .m-demo2 .p1{font-size:16px;}
  .m-demo3{line-height:3;} /*直接继承*/
  .m-demo3 p{background:#0dd;}
  .m-demo3 .p1{font-size:16px;}
</style>
</head>
<body>
<div class="m-demo">
  <p>行高：line-height:40px;</p>
  <p class="p1">行高：line-height:3em;</p>
  <p class="p2">行高：line-height:300%;</p>
  <p class="p3">行高：line-height:3;</p>
</div>
<div class="m-demo2">
  <p>行高：line-height:300%;</p>
  <p class="p1">字体大小：font-size:16px;</p>
</div>
<div class="m-demo3">
  <p>行高：line-height:3;</p>
  <p class="p1">字体大小：font-size:16px;</p>
</div>
</body>
</html>
font

font

color

color

text-align

text-align

vertical-align

vertical-align

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>
<head>
<meta charset="utf-8"/>
<title>vertical-align</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
  p{margin:10px;background:#ddd;font-size:30px;line-height:200%;}
  img{width: 1%;}
  .m-demo .p1{font-size:50px;}
  .m-demo span.va{font-size:20px;}
  .m-demo .va-1{vertical-align:middle;}
  .m-demo .va-2{vertical-align:20px;}
  .m-demo .va-3{vertical-align:sub;}
  .m-demo .va-4{vertical-align:super;}
</style>
</head>
<body>
<div class="m-demo">
  <p class="p1">文字<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495996785258&di=062f1f71eabb12378ae4809576013374&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F80%2F56%2F71Z58PICCPD_1024.jpg" class="va"><span>文字</span><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495996785258&di=062f1f71eabb12378ae4809576013374&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F80%2F56%2F71Z58PICCPD_1024.jpg" class="va va-1">文字</p>
  <p>普通文字<span class="va">普通</span><span>普通文字</span><span class="va va-2">对齐20px</span>普通文字</p>
  <p>普通文字<span class="va">普通</span><span>普通文字</span><span class="va va-3">对齐sub</span>普通文字</p>
  <p>普通文字<span class="va">普通</span><span>普通文字</span><span class="va va-4">对齐super</span>普通文字</p>
</div>
</body>
</html>
text-indent

text-indent

white-space

white-space

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>white-space</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
  p{margin:10px;background:#ddd;}
  .m-demo .p1{white-space:normal;}
  .m-demo .p2{white-space:pre;}
  .m-demo .p3{white-space:pre-wrap;}
  .m-demo .p4{white-space:pre-line;}
  .m-demo .p5{white-space:nowrap;}
  .m-demo .p6{white-space:pre-wrap;}
</style>
</head>
<body>
<div class="m-demo">
  <p class="p1">white-space:normal; 左边1个空格  左边2个空格   左边3个空格
左边一个换行
  左边一个换行加一个Tab</p>
  <p class="p2">white-space:pre; 左边1个空格  左边2个空格   左边3个空格
左边一个换行
  左边一个换行加一个Tab</p>
  <p class="p3">white-space:pre-wrap; 左边1个空格  左边2个空格   左边3个空格
左边一个换行
  左边一个换行加一个Tab</p>
  <p class="p4">white-space:pre-line; 左边1个空格  左边2个空格   左边3个空格
左边一个换行
  左边一个换行加一个Tab</p>
  <p class="p5">white-space:nowrap; 左边1个空格  左边2个空格   左边3个空格
左边一个换行
  左边一个换行加一个Tab</p>
  <p class="p6">
  .m-demo .p6{
      text-indent: 2em;
  }
  </p>
</div>
</body>
</html>
word-space

word-space

word-break

word-break

text-shadow

text-shadow

text-decoration

text-decoration

text-overflow

text-overflow

cursor

cursor

inherit

inherit

4.2.4 盒模型
box

box1

box2

width

width

padding

padding

padding2

margin

margin

margin合并

水平居中

border

border

border-radius1

border-radius2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>size</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
	div{margin: 30px;width: 200px;line-height: 200px;text-align: center;background-color: pink;}
	/*.sample0{border-radius: 10px;}*/
	/*.sample1{border-radius: 0 10px 20px 30px/40px 30px 20px 10px;}*/
	/*.sample2{border-radius: 50%;}*/
	/*.sample3{border-top-left-radius: 10px;}*/
</style>
</head>
<body>
	<div class="sample0">sample</div>
	<div class="sample1">sample</div>
	<div class="sample2">sample</div>
	<div class="sample3">sample</div>
</body>
</html>
overflow

overflow

box-sizing

box-sizing

box-shadow

box-shadow

box-shadow2

outline

outline

4.2.5 背景
background
1
2
3
4
5
6
7
8
background-color: rgba(255,0,0,.5);
background-image: url(red.jpg),url(blue.jpg);
background-repeat: no-repeat repeat,round;
background-attachment: local;
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: contain;
线性渐变 linear-gradient

线性渐变 linear-gradient

径向渐变 radial-gradient

径向渐变 radial-gradient

渐变重复

背景例子

4.2.6 布局
4.2.6.1 display

##block##

block

##inline##

inline

##inline-block##

inline-block

##none##

none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>display none demo</title>
	<style>
		.parent{margin: 30px;border: 1px solid pink;}
			
		.dn{display: none;} /*不占位*/
		.vh{visibility: hidden;} /*占位*/
	</style>
</head>
<body>
	<div class="parent">
		<div class="dn">display: none</div>
	</div>
	<div class="parent">
		<div class="vh">visibility: hidden</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>white-space</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
  .wrap{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #333;
  }
  .list{
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    background-color: #00efe0;
  }
  .list li, .list a{
    display: inline-block;
    width: 64px;
    height: 100%;
    padding: 0;
  }
  .list li{
    margin: 0 10px;
    background-color: #eee;
  }
</style>
</head>
<body>
  <div class='wrap'>
    <nav>
      <ul class="list">
        <li><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
      </ul>
    </nav>
  </div>
</body>
</html>
4.2.6.2 position

##position##

position

##z-index##

z-index

##relative##

relative

##absolute##

absolute

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播头图</title>
  <style>
    .banner{
      position: relative;
      width: 480px;
    }
    .banner img{
      display: block;
    }
    .banner .title{
      position: absolute;
      bottom: 0;
      width: 100%;
      margin: 0;
      line-height: 45px;
      background-color: #000;
      opacity: .8;
    }
    .banner .title a{
      margin-left: 20px;
      text-decoration: none;
    }
    .banner .controls{
      position: absolute;
      bottom: 18px;
      right: 10px;
      line-height: 10px;
    }
    .banner .controls span{
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: auto 1px;
      border-radius: 10px;
      background-color: #eee;
    }
    .banner .controls span.cur{
      background-color: #E33838;
    }
  </style>
</head>
<body>
  <div class="banner">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1496607073&di=a4dd558ff2259c5bee8972b1912cd0a3&imgtype=jpg&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa044ad345982b2b776e1b3bb3badcbef76099b57.jpg" alt="">
    <p class="title"><a href="javascript:void(0);"></a></p>
    <div class="controls">
      <span class="cur"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
</html>

##fixed##

fixed

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>固定顶栏</title>
  <style>
    body{margin: 0; line-height: 1.8; padding-top: 50px;}
    .top{position: fixed; top: 50px; width: 100%; height: 50px; color: #fff; background-color: #55B2DD;}
    .main{height: 1000px; background-color: #333;}
  </style>
</head>
<body>
  <div class="top">top bar</div>
  <div class="main"></div>
</body>
</html>
4.2.6.3 float

float

float2

float3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>float元素半脱离文档流</title>
  <style>
    body{width: 300px;padding: 5px;line-height: 1.6;border: 1px dashed blue;}
    .sample{height: 100px;margin-right: 5px;padding: 0 5px;line-height: 100px;background-color: pink}
    .sb{background-color: #eee;}
    .sb{outline: 1px dashed red;}
    .sample{float: left;}
  </style>
</head>
<body>
  <div class="sample">float: left;</div>
  <div class="sb">A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). </div>
</body>
</html>

##clear##

clear

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>clear</title>
  <style>
    body{width: 400px;line-height: 1.6;}
    .sample{float: left;width: 100px;line-height: 100px;text-align: center;background-color: pink;}
    .parent, .sb{padding: 5px 0;margin-bottom: 10px;outline: 1px dashed blue; word-break: break-all;}
    .sample{margin: auto 5px;}
    .sample{float: left;}
    .cb{clear: both;height: 0;overflow: hidden;visibility: hidden;}
    .clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
        .clearfix:after{content:'';display: table;clear: both;}
  </style>
</head>
<body>
  <div class="parent">
    <div class="sample">float: left</div><div class="sample">float: left</div><div class="sample">float: left</div>
    <br class="cb">
  </div>
  <br><br><br><br><br>
  <div>
    <div class="sb clearfix">
      <div class="sample">float: left;</div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae numquam necessitatibus provident iure aperiam, non tempora tenetur impedit odit quidem illum modi sint. Officiis omnis, saepe tenetur itaque! Unde, cumque.
    </div>
    <div class="sb">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae numquam necessitatibus provident iure aperiam, non tempora tenetur impedit odit quidem illum modi sint. Officiis omnis, saepe tenetur itaque! Unde, cumque.
    </div>
  </div>
</body>
</html>
4.2.6.4 flex 弹性布局
定义

创建flex container – display: flex

flex item – 在文档流中的子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div style='display:flex'>
  <div>
    block flex-item
  </div>
  <div style='float:left;'>
    float flex-item
  </div>
  <span>inline flex-item</span>
  <div style='position:absolute;'>
    no-flex-item
  </div>
  <div>
    <div>
      no-flex-item
    </div>
  </div>
</div>
方向

flex-direction

flex-direction

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex direction</title>
	<style>
		.container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
		.item{margin: 10px;line-height: 40px;text-align: center;background-color: #c99702;}
		.container0 .item, .container1 .item{padding: 0 12px;}
		.container{display: flex;}
		.container1{flex-direction: row-reverse;}
		.container2{flex-direction: column}
		.container3{flex-direction: column-reverse}
	</style>
</head>
<body>
	<div class="container container0">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	</div>
	<div class="container container1">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	</div>
	<div class="container container2">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	</div>
	<div class="container container3">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	</div>
</body>
</html>

flex-wrap

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex wrap</title>
	<style>
		.container{width: 400px;margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
		.item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
		.container{display: flex;}
		.container1{flex-wrap: wrap;}
		.container2{flex-wrap: wrap-reverse;}
	</style>
</head>
<body>
	<div class="container container0">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	  <div class="item">4</div>
	  <div class="item">5</div>
	</div>
	<div class="container container1">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	  <div class="item">4</div>
	  <div class="item">5</div>
	</div>
	<div class="container container2">
	  <div class="item">1</div>
	  <div class="item">2</div>
	  <div class="item">3</div>
	  <div class="item">4</div>
	  <div class="item">5</div>
	</div>
</body>
</html>

flex-flow

flex-flow

order

order

弹性

flex-basis

flex-basis: main-size | width

设置flex item 的初始宽或者高（结合方向）

flex-grow

flex-grow: <number>

initial: 0

设置或检索弹性盒的扩展比率。

设置flex item 所分配的空余空间比例

flex-grow

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>flex-grow</title>
  <style>
    .container{background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;}
    .container{display: flex;}
    .item{width: 100px;}
    .item2{flex-basis: 300px;}
    .item2{flex-grow: 1;}
    .item3{flex-grow: 2;}
    .item2, .item3{flex-basis: 0;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

flex-shrink

flex-shrink: <number>

initial: 1

设置或检索弹性盒的收缩比率。

按照比例分配负的剩余空间

不允许负值

flex-shrink

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">
  <title>flex-shink</title>
  <style>
    .container{width: 600px;background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;}
    .container{display: flex;}
    .item{flex-shrink: 0;}
    .item2{flex-shrink: 2;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">sets the flex shrink factor</div>
    <div class="item item2">sets the flex shrink factor</div>
    <div class="item item3">sets the flex shrink factor</div>
  </div>
</body>
</html>

flex

flex: <’flex-grow’> || <’flex-shrink’> || <’flex-basis’>

initial: 0 1 main-size

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>flex</title>
  <style>
    .container{background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;}
    .container{display: flex;flex-flow: column;}
    html, body, .container{height: 100%;}
    .item{flex: 1 1 0;}
    .item3{flex: 2;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>
对齐

justify-content

justify-content

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>justity-content</title>
  <style>
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
    
    .container{display: flex;}
    .fs{justify-content: flex-start;}
    .fe{justify-content: flex-end;}
    .c{justify-content: center;}
    .sb{justify-content: space-between;}
    .sa{justify-content: space-around;}
    .container{flex-flow: column;width: 120px;height: 300px;}
  </style>
</head>
<body>
  <div class="container fs">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container fe">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container c">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container sb">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container sa">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

align-items

align-items

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>align-items</title>
  <style>
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
    
    .container{display: flex;}
    .item1{line-height: 100px;}
    .item2{line-height: 70px;}
    .fs{align-items: flex-start;}
    .fe{align-items: flex-end;}
    .c{align-items: center;}
    .s{align-items: stretch;}
    .b{align-items: baseline;}
    .container{flex-flow: column;}
    .item1{width: 200px;}
    .item2{width: 150px;}
  </style>
</head>
<body>
  <div class="container fs">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container fe">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container c">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container s">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="container b">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

align-self

align-self

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>
<head>
	<meta charset="UTF-8">
	<title>align-self</title>
	<style>
		.container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
		.item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
		
		.container{display: flex;align-items: flex-start;}
		.item1{line-height: 100px;}
		/*.item2{align-self: flex-end;}*/
		/*.item2{align-self: center;}*/
		/*.item2{align-self: baseline;}*/
		/*.item2{align-self: stretch;}*/
	</style>
</head>
<body>
	<div class="container">
	  <div class="item item1">1</div>
	  <div class="item item2">2</div>
	  <div class="item item3">3</div>
	</div>
</body>
</html>

align-content

align-content

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>align-content</title>
	<style>
		.container{margin: 20px;width: 800px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
		.item{margin: 10px;width: 200px;line-height: 40px;text-align: center;background-color: #c99702;}
		
		.container{display: flex;}
		.container{height: 800px;flex-flow: row wrap;align-items: flex-start;}
		
		/*.container{align-content: flex-start;}*/
		/*.container{align-content: flex-end;}*/
		/*.container{align-content: center;}*/
		/*.container{align-content: space-between;}*/
		/*.container{align-content: space-around;}*/
		/*.container{align-content: stretch;}*/
	</style>
</head>
<body>
	<div class="container">
	  <div class="item item1">1</div>
	  <div class="item item2">2</div>
	  <div class="item item3">3</div>
	  <div class="item item4">4</div>
	  <div class="item item5">5</div>
	  <div class="item item6">6</div>
	  <div class="item item7">7</div>
	  <div class="item item8">8</div>
	  <div class="item item9">9</div>
	  <div class="item item10">10</div>
	</div>
</body>
</html>

flex Fit Layout

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex fit layout</title>
	<style>
		html, body{margin: 0;text-align: center;}
		.head, .foot{line-height: 100px;background-color: #000;color: #fff;}
		.side{background-color: yellow;}
		.main{background-color: pink;}
		html, body{height: 100%;}
		body{display: flex;flex-flow: column;}
		.head, .foot{height: 100px;}
		.body{flex: 1;display: flex;}
		.side{width: 200px;}
		.main{flex: 1;}
		/*.main{margin-left: 10px;}*/
		/*.body{width: 960px;align-self: center;}*/	
	</style>
</head>
<body>
	<div class="head">head</div>
	<div class="body">
		<div class="side">side</div>
		<div class="main">main</div>
	</div>
	<div class="foot">foot</div>
</body>
</html>
4.2.7 变形
transform

transform

######rotate

rotate

######translate

translate

scale

scale

######skew

skew

######transform
transform+

######transform-origin

transform-origin

######perspective

perspective（透视距离）

######perspective-origin

perspective-origin

######translate3d

translate3d

######scale3d

scale3d(配合其他属性进行效果增减)

######rotate3d

rotate3d(原点到端点的线为轴进行旋转)

######transform-style

transform-style（扁平化或者三维化）

######backface-visibility

backface-visibility（背面）

4.2.8 动画
1
2
3
4
5
6
/* demo style */
html,body,pre{margin:0;padding:0;border:0;}
body{font:12px/1.14 "Consolas",monospace;color:#333;background:#fff;}
.m-demo{position:relative;width:300px;height:300px;margin:100px auto;background:rgba(119,147,36,0.5);}
.m-demo pre{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;padding:10px;margin:0;font-size:38px;line-height:1.5;color:#fff;white-space:pre-wrap;word-break:break-all;background:rgba(119,147,36,0.75);}
transition-property

transition-property

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>transition-property</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:100px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;font-size:20px;text-align:center;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>none</pre>
</div>
<div class="m-demo m-demo-2">
    <pre>all</pre>
</div>
<div class="m-demo m-demo-3">
    <pre>left</pre>
</div>
<div class="m-demo m-demo-4">
    <pre>left,<br>color</pre>
</div>
</body>
</html>
transition-duration

transition-duration

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>transition-duration</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>0s</pre>
    <pre>1s</pre>
    <pre>2s</pre>
    <pre>3s</pre>
</div>
</body>
</html>
transition-timing-function

transition-timing-function

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>
<head>
<meta charset="utf-8"/>
<title>transition-timing-function</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:700px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>ease</pre>
    <pre>linear</pre>
    <pre>ease-out</pre>
    <pre>cubic-bezier<br>(0.8,0,0,0.8)</pre>
    <pre>steps<br>(3,start)</pre>
</div>
</body>
</html>
transition-delay

transition-delay

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>transition-delay</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>0s</pre>
    <pre>1s</pre>
    <pre>2s</pre>
    <pre>3s</pre>
</div>
</body>
</html>
transition

transition

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>transition</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:400px;outline:2px dashed;margin:20px auto;}
.m-demo pre{width:100px;height:100px;padding:0;line-height:100px;transition:2s;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition:none;top:0;}
.m-demo pre:nth-child(2){transition:2s;top:150px;}
.m-demo pre:nth-child(3){transition:left 2s ease 1s,color 2s;top:300px;padding:20px 0;line-height:20px;font-size:16px;}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>none</pre>
    <pre>2s</pre>
    <pre>left 2s<br>ease 1s<br>,color 2s</pre>
</div>
</body>
</html>
animation-name

animation-name

animation-duration

animation-duration

animation-timing-function

animation-timing-function

animation-iteration-count

animation-iteration-count

animation-direction

animation-direction

animation-play-state

animation-play-state

animation-delay

animation-delay

animation-fill-mode

animation-fill-mode

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>animation-fill-mode</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:200px;outline:2px dashed;margin:20px auto;}
.m-demo pre{left:0;top:100px;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo pre{-webkit-animation:abc 2s 2s both;}
.m-demo-1 pre{-webkit-animation-fill-mode:none;}
.m-demo-2 pre{-webkit-animation-fill-mode:backwards;}
.m-demo-3 pre{-webkit-animation-fill-mode:forwards;}
.m-demo-4 pre{-webkit-animation-fill-mode:both;}
@-webkit-keyframes abc{
    0%{left:0;top:0;}
    50%{left:250px;top:100px;}
    100%{left:500px;top:0;}
}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>none</pre>
</div>
<div class="m-demo m-demo-2">
    <pre>backwards</pre>
</div>
<div class="m-demo m-demo-3">
    <pre>forwards</pre>
</div>
<div class="m-demo m-demo-4">
    <pre>both</pre>
</div>
</body>
</html>
animation

animation

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>animation</title>
<link rel="stylesheet" href="demo.css"/>
<style type="text/css">
.m-demo{width:600px;height:200px;outline:2px dashed;margin:20px auto;}
.m-demo pre{width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo-1 pre{-webkit-animation:abc 2s;}
.m-demo-2 pre{-webkit-animation:abc 2s both;padding:20px 0;line-height:30px;}
.m-demo-3 pre{-webkit-animation:abc 2s both infinite alternate;padding:20px 0;line-height:20px;font-size:16px;}
@-webkit-keyframes abc{
    0%{left:0;top:0;}
    50%{left:250px;top:100px;}
    100%{left:500px;top:0;}
}
</style>
</head>
<body>
<div class="m-demo m-demo-1">
    <pre>abc 2s</pre>
</div>
<div class="m-demo m-demo-2">
    <pre>abc 2s<br>both</pre>
</div>
<div class="m-demo m-demo-3">
    <pre>abc 2s both<br>infinite<br>alternate<br></pre>
</div>
</body>
</html>
keyframes

keyframes

practice
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>practice</title>
<style type="text/css">
.m-demo{position:absolute;top:50%;left:50%;width:400px;height:400px;margin:-200px;perspective:1000px;cursor:default;}
.m-demo .box{position:absolute;width:100%;height:100%;transform-style:preserve-3d;-webkit-animation:rotate 5s 15s linear infinite both;}
.m-demo .box>div{position:absolute;width:100%;height:100%;box-sizing:border-box;border:2px solid rgba(0,0,0,0);background:rgba(0,0,0,0);border-color:rgba(0,0,0,0.8);transition:1s linear;text-align:center;line-height:400px;font-size:50px;}
.m-demo .box .top{-webkit-animation:top 2s 2s linear both;}
.m-demo .box .bottom{-webkit-animation:bottom 2s 4s linear both;}
.m-demo .box .left{-webkit-animation:left 2s 6s linear both;}
.m-demo .box .right{-webkit-animation:right 2s 8s linear both;}
.m-demo .box .back{-webkit-animation:back 2s 10s linear both;}
.m-demo .box .front{-webkit-animation:front 2s 12s linear both;}
.m-demo:hover .box>div{border-color:rgba(0,0,0,0);color:#fff;}
.m-demo:hover .box .top{background:rgba(255,255,0,0.8);}
.m-demo:hover .box .bottom{background:rgba(0,255,0,0.8);}
.m-demo:hover .box .left{background:rgba(0,255,255,0.8);}
.m-demo:hover .box .right{background:rgba(0,0,255,0.8);}
.m-demo:hover .box .front{background:rgba(255,0,255,0.8);}
.m-demo:hover .box .back{background:rgba(255,0,0,0.8);}
@-webkit-keyframes rotate{
    100%{-webkit-transform:rotate3d(1,1,1,360deg);}
}
@-webkit-keyframes top{
    100%{-webkit-transform:rotateX(90deg) translateZ(200px);}
}
@-webkit-keyframes bottom{
    100%{-webkit-transform:rotateX(-90deg) translateZ(200px);}
}
@-webkit-keyframes left{
    100%{-webkit-transform:rotateY(-90deg) translateZ(200px);}
}
@-webkit-keyframes right{
    100%{-webkit-transform:rotateY(90deg) translateZ(200px);}
}
@-webkit-keyframes front{
    100%{-webkit-transform:translateZ(200px);}
}
@-webkit-keyframes back{
    100%{-webkit-transform:rotateY(180deg) translateZ(200px);}
}
</style>
</head>
<body>
<div class="m-demo">
    <div class="box">
        <div class="top">top</div>
        <div class="bottom">bottom</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="front">front</div>
        <div class="back">back</div>
    </div>
</div>
</body>
</html>