CSS3简介

CSS3是最新的CSS标准

CSS3新特性

选择器(CSS已经总结)
盒模型(CSS已经总结)
背景
边框
文本效果
渐变
2D/3D 转换
过渡和动画
字体(与字体图标结合)
字体图标(CSS已经总结)
响应式(媒体查询已经总结)
多列布局(栅格系统已经总结)
用户界面
flex布局(flex布局已经总结)

背景

background-size
background-origin
background-clip

background-size

规定背景图像的尺寸
length:设置背景图像的高度和宽度(px)
percentage:以父元素的百分比来设置背景图像的宽度和高度(%)
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(http://note.youdao.com/favicon.ico);
background-repeat:no-repeat;
background-size: 100px 100px;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是改变的背景图片。</p>
<p>原始图片：
  <img src="http://note.youdao.com/favicon.ico" alt="Flowers">
</p>
</body>
</html>

background-origin

相对于内容框来定位背景图像
padding-box: 背景图像相对于内边距框来定位
border-box: 背景图像相对于边框盒来定位
content-box: 背景图像相对于内容框来定位

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  border:1px solid black;
  padding:35px;
  background-image:url('http://note.youdao.com/favicon.ico');
  background-repeat:no-repeat;
  background-position:left;
}
#div1
{
  background-origin:border-box;
}
#div2
{
  background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>

background-clip

属性规定背景的绘制区域
padding-box: 背景被裁剪到边框盒
border-box: 背景被裁剪到内边距框
content-box: 背景被裁剪到内容框

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
  width:300px;
  height:300px;
  padding:50px;
  background-color:yellow;
  background-clip:content-box;
  border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>

边框

border-radius
border-image
box-shadow

box-shadow

设置元素的圆角半径
length:定义圆角的形状
%:以百分比定义圆角的形状

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	text-align:center;
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:350px;
	border-radius:25px;
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

border-image

将图片规定为包围 div 元素的边框
border-image:属性是一个简写属性
border-image-source:用在边框的图片的路径
border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度
border-image-outset:边框图像区域超出边框的量
border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	border:15px solid transparent;
	width:300px;
	padding:10px 20px;
}
#round
{
	border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
	border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
<br>
<div id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img src="/i/border.png">
<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

box-shadow

box-shadow: h-shadow v-shadow blur spread color inset
向框添加一个或多个阴影
h-shadow:必需。水平阴影的位置。允许负值
v-shadow:必需。垂直阴影的位置。允许负值
blur:可选。模糊距离
spread:可选。阴影的尺寸
color:可选。阴影的颜色。请参阅 CSS 颜色值
inset:可选。将外部阴影 (outset) 改为内部阴影

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

文本效果

text-shadow
text-overflow
word-wrap
word-break
white-space

text-shadow

text-shadow: h-shadow v-shadow blur color
向文本添加一个或多个阴影
h-shadow:必需。水平阴影的位置。允许负值
v-shadow:必需。垂直阴影的位置。允许负值
blur:可选。模糊的距离
color:可选。阴影的颜色

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>

text-overflow

text-overflow: clip|ellipsis|string
规定当文本溢出包含元素时发生的事情
clip:修剪文本
ellipsis:显示省略符号来代表被修剪的文本
string:使用给定的字符串来代表被修剪的文本

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p>这个 div 使用 "text-overflow:ellipsis" ：</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>

word-wrap

word-wrap: normal|break-word
允许长单词换行到下一行
normal:只在允许的断字点换行（浏览器保持默认处理）
break-word:在长单词或 URL 地址内部进行换行

<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

word-break

word-break: normal|break-all|keep-all
在恰当的断字点进行换行
normal:使用浏览器默认的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:hyphenate;
}
p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>
</body>
</html>

white-space

设置如何处理元素内的空白
normal:默认。空白会被浏览器忽略
pre:空白会被浏览器保留。其行为方式类似 HTML 中的
```
 标签
```
nowrap:文本不会换行，文本会在在同一行上继续，直到遇到
标签为止
pre-wrap:保留空白符序列，但是正常地进行换行
pre-line:合并空白符序列，但是保留换行符
inherit:规定应该从父元素继承 white-space 属性的值

<html>
<head>
<style type="text/css">
p
{
white-space: nowrap
}
</style>
</head>
<body>
<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>
</body>
</html>

渐变

两个或多个指定的颜色之间显示平稳的过渡

线性渐变(Linear Gradients)

background: linear-gradient(angle, color-stop1, color-stop2)
向下/向上/向左/向右/对角方向
定义两种颜色结点,颜色结点即你想要呈现平稳过渡的颜色,设置一个起点和一个方向(或一个角度)
默认情况下,线性渐变 - 从上到下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(red, blue);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>

径向渐变(Radial Gradients)

background: radial-gradient(center, shape size, start-color, …, last-color)
由它们的中心定义
定义两种颜色结点,颜色结点即你想要呈现平稳过渡的颜色,同时，指定渐变的中心、形状（原型或椭圆形）、大小
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: radial-gradient(red, green, blue); 
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

2D/3D转换

2D转换

transform
对元素进行移动、缩放、转动、拉长或拉伸
translate():元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数
rotate():元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew():元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix():方法把所有 2D 转换方法组合在一起,需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
</body>
</html>

3D转换

transform
允许您使用 3D 转换来对元素进行格式化
rotateX():元素围绕其 X 轴以给定的度数进行旋转
rotateY():元素围绕其 Y 轴以给定的度数进行旋转

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
}
</style>
</head>
<body>
<div>你好。这是一个 div 元素。</div>
<div id="div2">你好。这是一个 div 元素。</div>
<p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p>
</body>
</html>

过渡和动画

过渡:不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
动画:可以在许多网页中取代动画图片、Flash 动画以及 JavaScript

过渡

transition: 1s 1s height ease
transition:简写属性，用于在一个属性中设置四个过渡属性
规定希望把效果添加到哪个CSS 属性上,规定效果的时长
transition-property:规定应用过渡的 CSS 属性的名称
transition-duration:定义过渡效果花费的时间。默认是 0
transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”
transition-delay:规定过渡效果何时开始。默认是 0

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

动画

@keyframes 规则:用于创建动画,规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
animation: 1s 1s rainbow linear 3 forwards normal
animation:所有动画属性的简写属性，除了 animation-play-state 属性
规定动画的名称,规定动画的时长
animation-name:规定 @keyframes 动画的名称
animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function:规定动画的速度曲线。默认是 “ease”
animation-delay:规定动画何时开始。默认是 0
animation-iteration-count:规定动画被播放的次数。默认是 1
animation-direction:规定动画是否在下一周期逆向地播放。默认是 “normal”
animation-play-state:规定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode:规定对象动画时间之外的状态

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

动画实例一

用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

动画实例二

改变背景色和位置

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>

字体

@font-face
自定义字体的能力，我们可以把字体文件像图片一样放在服务器或者CDN，然后在页面通过CSS指定下载到客户端，这样客户端就可以使用

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>
</body>
</html>

字体格式

WOFF:支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
SVG / SVGZ:支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
EOT:只在IE6/IE8里使用
OTF:支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
TTF:支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】

书写方式

为了让各多的浏览器支持

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
body{
    font-family: 'YourWebFontName';
}

直接下载字体图标自带各种配置

多列布局

创建多个列来对文本进行布局 - 就像报纸那样
CSS3新增了多列布局特性，可以让浏览器确定何时结束一列和开始下一列
column-count: 列数
column-width: 每列宽度
column-gap: 列间距
column-rule: 列之间边框
column-span: 列之间跨度

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper
{
column-count:3;
column-gap:40px;
column-rule:4px outset #ff0000;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</body>
</html>

column-gap 的间距只在列之间才有

column-rule 在间距中间显示

column-width和column-count是相互配合的，两个都设置，按照后者优先

用户界面

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓
appearance:允许您将元素设置为标准用户界面元素的外观
box-sizing:允许您以确切的方式定义适应某个区域的具体内容
icon:为创作者提供使用图标化等价物来设置元素样式的能力
nav-down:规定在使用 arrow-down 导航键时向何处导航
nav-index:设置元素的 tab 键控制次序
nav-left:规定在使用 arrow-left 导航键时向何处导航
nav-right:规定在使用 arrow-right 导航键时向何处导航
nav-up:规定在使用 arrow-up 导航键时向何处导航
outline-offset:对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
resize:规定是否可由用户对元素的尺寸进行调整

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>resize 属性规定是否可由用户调整元素尺寸。</div>
<p><b>注释：</b> Firefox 4+、Safari 以及 Chrome 支持 resize 属性。</p>
</body>
</html>

效果

CSS3效果的简单事例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.ct-1,.ct-2,.ct-3,.ct-4,.ct-5,.ct-6,.ct-7{
			margin: 30px;
		}
		.ct-1 div{
			display: inline-block;
			margin: 0 30px;
			vertical-align: middle;
		}
		.ct-1 .item-1{
			width: 100px;
			height: 60px;
			border: 1px solid #ccc;
			border-radius: 20px;
			text-align: center;
		}
		.ct-1 .item-2{
			width: 100px;
			height: 100px;
			border: 1px solid #ccc;
			background-color: #ccc;
			border-radius: 50%;
			text-align: center;
		}
		.ct-1 .item-3{
			width: 100px;
			height: 60px;
			border: 1px solid #ccc;
			box-shadow: 2px 2px #ccc;
		}
		.ct-2 >div{
			margin: 40px;
			display: inline-block;
			vertical-align: top;
		}
		.ct-2 .item-1{
			width: 100px;
			height: 100px;
			border: 1px dashed #000;
		}
		.ct-2 .item-1 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transform: scale(1.5,1.5);
			opacity: 0.9;
		}
		.ct-2 .item-2{
			width: 100px;
			height: 100px;
			border: 1px dashed #000;
		}
		.ct-2 .item-2 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transform: scale(0.5,0.5);
		}
		.ct-2 .item-3{
			width: 100px;
			height: 100px;
			border: 1px dashed #000;
		}
		.ct-2 .item-3 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transform: translate(50px,50px);
		}
		.ct-2 .item-4{
			width: 100px;
			height: 100px;
			border: 1px dashed #000;
		}
		.ct-2 .item-4 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transform: rotate(45deg);
		}
		.ct-3 .item-1{
			margin: 40px;
			width: 100px;
			height: 100px;
			border: 1px dashed #000;
		}
		.ct-3 .item-1 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transform: perspective(100px) rotateY(60deg) translate(20px,10px);
		}
		.ct-4 .item-1{
			margin: 40px;
			width: 100px;
			height: 100px;
			border: 1px solid #ccc;
		}
		.ct-4 .item-1 div{
			width: 100px;
			height: 100px;
			background-image: linear-gradient(to bottom right,pink,orange)
		}
		.ct-5 .item-1{
			margin: 40px;
			width: 100px;
			height: 100px;
		}
		.ct-5 .item-1 div{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			transition: all 1s;
		}
		.ct-5 .item-1 div:hover{
			width: 120px;
			height: 120px;
		}
		.ct-6 .item-1{
			margin: 40px;
			width: 80px;
			height: 80px;
			border: 20px solid rgba(204,204,204,0.4);
			border-radius: 50%;
			border-top: 20px solid rgba(204,204,204,1);
			animation: 1s load infinite linear;
		}
		@keyframes load{
			0%{
				transform: rotate(0);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="ct-1">
		<div class="item-1">圆角</div>
		<div class="item-2">圆形</div>
		<div class="item-3">box-shadow</div>
	</div>
	<div class="ct-2">
		放大
		<div class="item-1">
			<div></div>
		</div>
		缩小
		<div class="item-2">
			<div></div>
		</div>
		偏移
		<div class="item-3">
			<div></div>
		</div>
		旋转
		<div class="item-4">
			<div></div>
		</div>  
	</div>
	<div class="ct-3">
		3D移动/旋转
		<div class="item-1">
			<div></div>
		</div>
	</div>
	<div class="ct-4">
		渐变
		<div class="item-1">
			<div></div>
		</div>
	</div>
	<div class="ct-5">
		过渡动画
		<div class="item-1">
			<div>移入鼠标</div>
		</div>
	</div>
	<div class="ct-6">
		动画
		<div class="item-1">
			<div></div>
		</div>
	</div>
</body>
</html>

全屏图加过渡色的效果

<!DOCTYPE html>
<html>
<head>
	<title>css3</title>
	<meta charset="utf-8">
	<style>
		.pic{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: url(http://hiphotos.baidu.com/space/pic/item/a2cc7cd98d1001e980fa99aab20e7bec55e79755.jpg) center center no-repeat;
			background-size: cover;
		}
		.pic:before{
			content: '';
			display: block;
			width: 50%;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			background: linear-gradient(to left,rgba(255,255,255,0),rgba(255,192,203,0.9));
		}
		.pic:after{
			content: '';
			display: block;
			width: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to right,rgba(255,255,255,0),rgba(238,232,170,0.9));
		}
	</style>
</head>
<body>
	<div class="pic"></div>
</body>
</html>

loading 动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            height: 100vh;
            background-color: #ccc;
        }
        .ct-1{
            position: relative;
            margin: 40px;
            width: 100px;
            height: 200px;
        }
        .ct-1 .item-1{
            position: absolute;
            margin: 40px;
            width: 9px;
            height: 40px;
            background-color: #fff;
            animation: 1s load1 infinite linear;
            animation-delay: 0.2s;
        }
        .ct-1 .item-1:before{
            position: absolute;
            content: '';
            width: 9px;
            height: 40px;
            background-color: #fff;
            left: -15px;
            animation: 1s load1 infinite linear;
        }
        .ct-1 .item-1:after{
            position: absolute;
            content: '';
            width: 9px;
            height: 40px;
            background-color: #fff;
            left: 15px;
            animation: 1s load1 infinite linear;
            animation-delay: 0.4s;
        }
        @keyframes load1{
            0%{
                height: 40px;
                box-shadow: 0 0 #fff;
            }
            20%{
                height: 50px;
                box-shadow: 0 -10px #fff;
            }
            100%{
                height: 40px;
                box-shadow: 0 0 #fff;
            }
        }
        .ct-2 .item-1{
            margin: 40px;
            width: 80px;
            height: 80px;
            border: 20px solid rgba(106,90,205,0.2);
            border-radius: 50%;
            border-top: 20px solid rgba(106,90,205,1);
            animation: 1s load2 infinite linear;
        }
        @keyframes load2{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
load动画
<div class="ct-1">
    <div class="item-1">
    </div>
</div>
<div class="ct-2">
    load动画
    <div class="item-1">
        <div></div>
    </div>
</div>
</body>
</html>