【整理】CSS3知识点2

1、=============================================================CSS3 文本效果
CSS3 文本效果
CSS3中包含几个新的文本特征。
在本章中您将了解以下文本属性：
text-shadow
word-wrap


CSS3的文本阴影
CSS3中，text-shadow属性适用于文本阴影。
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

h1

 {

 text-shadow: 5px 5px 5px #FF0000;

 }

CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字：
允许长文本换行:
p {word-wrap:break-word;}


New Text Properties
属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3


2、=============================================================CSS3 字体
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

<style> 

 @font-face

 {

 font-family: myFirstFont;

 src: url(sansation_light.woff);

 }



 div

 {

 font-family:myFirstFont;

 }

 </style>

使用粗体文本
您必须添加另一个包含粗体文字的@font-face规则：
OperaSafariChromeFirefoxInternet Explorer
实例

@font-face

 {

 font-family: myFirstFont;

 src: url(sansation_bold.woff);

 font-weight:bold;

 }

CSS3 字体描述
http://www.runoob.com/css3/css3-fonts.html

3、===================================================================CSS3 2D 转换
CSS3 转换
CSS3转换，我们可以移动，比例化，反过来，旋转，和拉伸元素。
它是如何工作？
变换的效果，让某个元素改变形状，大小和位置。
您可以转换您使用2D或3D元素。
2D 转换
在本章您将了解2D变换方法：

translate()

 rotate()

 scale()

 skew()

 matrix()



 div旋转

 div

 {

 width:200px;

 height:100px;

 background-color:yellow;

 /* Rotate div */

 transform:rotate(30deg);

 -ms-transform:rotate(30deg); /* IE 9 */

 -webkit-transform:rotate(30deg); /* Safari and Chrome */

 }



 translate() 方法

 translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

 div

 {

 transform: translate(50px,100px);

 -ms-transform: translate(50px,100px); /* IE 9 */

 -webkit-transform: translate(50px,100px); /* Safari and Chrome */

 }

 translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。



 rotate() 方法

 rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

 div

 {

 transform: rotate(30deg);

 -ms-transform: rotate(30deg); /* IE 9 */

 -webkit-transform: rotate(30deg); /* Safari and Chrome */

 }

 rotate值（30deg）元素顺时针旋转30度。



 scale() 方法

 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

 div

 {

 transform: scale(2,4);

 -ms-transform: scale(2,4); /* IE 9 */

 -webkit-transform: scale(2,4); /* Safari and Chrome */

 }

 scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度。



 skew() 方法

 skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

 div

 {

 transform: skew(30deg,20deg);

 -ms-transform: skew(30deg,20deg); /* IE 9 */

 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

 }

 skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。

matrix() 方法
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
利用matrix()方法旋转div元素30°

div

 {

 transform:matrix(0.866,0.5,-0.5,0.866,0,0);

 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */

 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

 }

新转换属性
以下列出了所有的转换属性:
Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置 3


2D 转换方法
函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。


4、===================================================================CSS3 3D 转换
3D Transforms
CSS3 允许您使用 3D 转换来对元素进行格式化。
在本章中，您将学到其中的一些 3D 转换方法：
rotateX()
rotateY()

rotateX() 方法

 rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

 div

 {

 transform: rotateX(120deg);

 -webkit-transform: rotateX(120deg); /* Safari and Chrome */

 }

 rotateY() 方法  类似

转换属性
下表列出了所有的转换属性：
属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3


3D 转换方法
函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。


5、===================================================================CSS3 过渡
CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
它是如何工作？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。


应用于宽度属性的过渡效果，时长为 2 秒：

div

 {

 transition: width 2s;

 -webkit-transition: width 2s; /* Safari */

 }

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：
规定当鼠标指针悬浮(:hover)于 <div>元素上时：

div:hover

 {

 width:300px;

 }

 实例

 <!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 transition:width 2s;

 -webkit-transition:width 2s; /* Safari */

 }

 div:hover

 {

 width:300px;

 }

 </style>

 </head>

 <body>

 <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

 <div></div>

 <p>鼠标移动到 div 元素上，查看过渡效果。</p>

 </body>

 </html>

多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div {

     width: 100px;

     height: 100px;

     background: red;

     -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

     transition: width 2s, height 2s, transform 2s;

 }

 div:hover {

     width: 200px;

     height: 200px;

     -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

     transform: rotate(180deg);

 }

 </style>

 </head>

 <body>

 <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

 <div>鼠标移动到 div 元素上，查看过渡效果。</div>

 </body>

 </html>

过渡属性
下表列出了所有的过渡属性:
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3


在一个例子中使用所有过渡属性：

div

 {

 transition-property: width;

 transition-duration: 1s;

 transition-timing-function: linear;

 transition-delay: 2s;

 /* Safari */

 -webkit-transition-property:width;

 -webkit-transition-duration:1s;

 -webkit-transition-timing-function:linear;

 -webkit-transition-delay:2s;

 }

6、===================================================================CSS3 动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。


实例

@keyframes myfirst

 {

 from {background: red;}

 to {background: yellow;}

 }



 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 from {background: red;}

 to {background: yellow;}

 }

CSS3 动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长


实例
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 animation:myfirst 5s;

 -webkit-animation:myfirst 5s; /* Safari and Chrome */

 }

 @keyframes myfirst

 {

 from {background:red;}

 to {background:yellow;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 from {background:red;}

 to {background:yellow;}

 }

 </style>

 </head>

 <body>

 <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。


CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。


实例
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 animation:myfirst 5s;

 -moz-animation:myfirst 5s; /* Firefox */

 -webkit-animation:myfirst 5s; /* Safari and Chrome */

 -o-animation:myfirst 5s; /* Opera */

 }

 @keyframes myfirst

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-moz-keyframes myfirst /* Firefox */

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-o-keyframes myfirst /* Opera */

 {

 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 9 及更早 IE 版本是无效的。</p>

 </body>

 </html>

实例
改变背景色和位置：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation:myfirst 5s;

 -webkit-animation:myfirst 5s; /* Safari and Chrome */

 }

 @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;}

 }



 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 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 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>

CSS3的动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3


下面两个例子设置所有动画属性：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation-name:myfirst;

 animation-duration:5s;

 animation-timing-function:linear;

 animation-delay:2s;

 animation-iteration-count:infinite;

 animation-direction:alternate;

 animation-play-state:running;

 /* Safari and Chrome: */

 -webkit-animation-name:myfirst;

 -webkit-animation-duration:5s;

 -webkit-animation-timing-function:linear;

 -webkit-animation-delay:2s;

 -webkit-animation-iteration-count:infinite;

 -webkit-animation-direction:alternate;

 -webkit-animation-play-state:running;

 }

 @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;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 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 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>

实例
与上面的动画相同，但是使用了简写的动画 animation 属性：

<!DOCTYPE html>

 <html>

 <head>

 <style> 

 div

 {

 width:100px;

 height:100px;

 background:red;

 position:relative;

 animation:myfirst 5s linear 2s infinite alternate;

 /* Firefox: */

 -moz-animation:myfirst 5s linear 2s infinite alternate;

 /* Safari and Chrome: */

 -webkit-animation:myfirst 5s linear 2s infinite alternate;

 /* Opera: */

 -o-animation:myfirst 5s linear 2s infinite alternate;

 }

 @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;}

 }

 @-moz-keyframes myfirst /* Firefox */

 {

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

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

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

 }

 @-o-keyframes myfirst /* Opera */

 {

 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 9 及更早 IE 版本是无效的。</p>

 <div></div>

 </body>

 </html>