1.CSS3 文本效果
- text-shadow属性适用于文本阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
- box-shadow 属性适用于盒子阴影
div {
box-shadow: 10px 10px 5px #888888;
}
- CSS3文本溢出属性指定应向用户如何显示溢出内容
可以显示自定义字符或者显示...等等。
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden; //这个是需要设置的，下面html代码中，设置了text-overflow的样式，这样可以显示不同的效果了。
border:1px solid #000000;
}
</style>
<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>
<p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
- CSS3的换行
如果某个单词太长，不适合在一个区域内，它扩展到外面：
CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字.
p {word-wrap:break-word;}
2.CSS3 字体
以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont).
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
3.2D 转换
2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
注意，它还是占位置的，并且在文档流中。
- translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
- rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数.
- matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
4.3D 转换
rotateX()方法，围绕其在一个给定度数X轴旋转的元素
这个用到的时候再查吧。
5.CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
(1)指定要添加效果的CSS属性
(2)指定效果的持续时间。
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;//指明改变width的属性，时间是2秒
}
div:hover {
width: 300px;//放上来的时候，改变宽度到300px.鼠标离开的时候，会从300px变到100px，也是时间2秒
}
</style>
<div></div>
要添加多个样式的变换效果，添加的属性由逗号分隔：
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
一个完整的变换的例子，可以设置四个方面的参数：
div
{
transition-property: width;//设置变换那个参数
transition-duration: 1s;//设置时间。参数和时间必不可少
transition-timing-function: linear;//怎么变化，可以线性或者先快后慢等等
transition-delay: 2s;//变化延迟时间，默认是0.怎么变和延迟，非必要
}
6.CSS3 动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
(1)规定动画的名称
(2)规定动画的时长
<style>
div {
width: 100px;
height: 100px;
background: green;
}
div:hover//鼠标放上去会显示红色然后变成黄色，5s动画结束后会变成本来的绿色
{
animation: myfirst 5s;//要写动画名称，时间要写，不写默认是0，没有效果.
}
@keyframes myfirst {
from {
background: red;//开始是红色
}
to {
background: yellow;//最后变成黄色
}
}
</style>
<div></div>
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
<style>
div {
width: 100px;
height: 100px;
background: gray;
}
div:hover {
animation: myfirst 5s;
}
@keyframes myfirst {
0% { background: red; }
25% {background: yellow;}
50% { background: blue;}
100% { background: green;}
}
</style>
<div></div>
同时改变，形成动画：
<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>
<div></div>
@keyframes 规定动画。
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"。
