CSS3过渡：transition属性——专门应对颜色、长度、宽度、位置等变化的过渡
通过CSS3，我们可以在不使用Flash和JavaScript的情况下，为当前某元素从某样式改变为某样式的时候添加过渡效果。我们仅仅使用到了一个transition属性，专门来写过渡从一个样式到另一个样式过渡时所花费的时间，以秒为单位。若时长不规定，默认为0，即没有过渡时间。在使用这个过渡效果的时候，我们使用了类似于超链接的l(link)、v(visited)、h(hover)、a(active)样式的控制。此过渡时间可以规定背景改变、位置改变、及上面看到过的2D转换、3D转换再加上位置改变等样式变化需要使用的时间长度。
//一：
//1.border-radius: 50px;50%
//2.box-shandow:30px 20px 10px red inset; 30px:距离左侧30px;20px:距离上边20px;10px:模糊的像素;inset:说明超出的部分不显示,仅显示外边框内部的部分,并且颜色互换
//3.background-image:
//4.background-size:
//5.background-origin:1.border-box:根据边框进行定位.2.content-box:根据文本进行定位
//二:css3文本效果
//1.text-shandow:文字阴影效果
//2.word-wrap:允许文本强制进行换行 1.break-word:将单词进行拆分
//三：css3转换
//1.2D转换:transform属性:变形、转换
//transform:rotate(30deg);使div和它里面的文字内容一起转动30度
//transform:translatr(30px,20px);30px:距离左侧,20px距离上边
//transform:scale(2,3)2:宽度的倍数;3:高度的倍数
//transform:skew(30deg,0deg):30:水平扭转30度,垂直扭转30度
//2.3D转换:rotateX():沿着x轴翻下来;rotateY():沿着y轴翻下来;
//2D和3D的区别:2D转换仅在平面,文字可以看出没有反过来3D相当于镜面效果
//3.css3过渡:transition属性:针对颜色、长度、宽度、位置等变化的过渡过渡过渡
//transition:1s;1s的事件进行过渡
//4.想要创建动画,需要遵循$keyframes规则;IE需要10以上;创建好动画之后需要绑定到某个选择器,否则不会产生任何动画效果;使用animation进行动画捆绑、两个值:动画名称、时长;时间长度必须规定,否则默认为0(没有动画效果);动画只执行一遍,动画结束后跳到最初样式
//在样式表中:$keyframes id(div的id){from{background:red;} to{background:green}}
一、CSS3过渡
1.普通
换背景颜色，鼠标放上后背景颜色直接改变。
<style>
body
{
font-size:24px;
color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#aa:hover
{
background-color:#F39;}
</style>
</head>
<body>
<div id="aa">这个是普通的换背景颜色</div>
</body>
2.鼠标放上背景颜色变化时有1s的过渡时间
body
{
font-size:24px;
color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#bb{
transition:1s;
}
#bb:hover
{
background-color:#F39;}
</style>
</head>
<body>
<div id="bb">这个是加上过渡时间的换背景颜色</div>
</body>
3.实现图片轮播，鼠标放上后显示第2张图片，按下左键不松开，显示第3章图片。
<style>
body
{
font-size:24px;
color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#bg
{
width:200px;
height:200px;
border:1px solid red;
position:relative;
margin-left:200px;}
#tb
{
position:relative;
left:0px;
top:0px;
transition:0.7s;}
#tb:hover
{
left:-200px;}
#tb:active
{
left:-400px;}
</style>
</head>
<body>
位置改变：可以直接使用在大图轮播上。不需要引用Jquery就可以实现滑动过渡效果。
<div id="bg">
<table id="tb" width="600" height="200" cellpadding="0" cellspacing="0">
<tr>
<td><img src="data:images/bg_flower.gif" width="200" height="200" /></td>
<td><img src="data:images/border.png" width="200" height="200" /></td>
<td><img src="data:images/bg_flower.gif" width="200" height="200" /></td>
</tr>
</table>
</div>
4.鼠标放上，矩形的高和宽变化
body
{
font-size:24px;
color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#kuan
{
width:200px;
height:200px;
border:1px solid blue;
position:relative;
transition:1s;}
#kuan:hover
{
width:400px;
height:150px;}
</style>
</head>
<body>
<div id="kuan">这里是宽度、高度改变。原始宽200px，高200px；改变后宽400px，高150px</div>
</body>
变化前
变化后
5.大图轮播效果，可以直接用CSS写出来
<style>
body
{
min-width:900px;}
#datu
{
width:800px;
height:500px;
position:relative;
margin:30px auto;
overflow:hidden;}
#ta
{
margin-left:0px;
transition:0.7s;}
.lr
{
position:absolute;
top:230px;
width:32px;
height:32px;
z-index:99;}
#left
{
left:10px;
}
#right
{
right:10px;
}
</style>
</head>
<body>
<div id="datu" onmouseover="pause()" onmouseout="conti()">
<table id="ta" cellpadding="0" cellspacing="0">
<tr height="500">
<td width="800"><img src="Images/1.jpg" /></td>
<td width="800"><img src="Images/2.jpg" /></td>
<td width="800"><img src="Images/3.jpg" /></td>
<td width="800"><img src="Images/4.jpg" /></td>
<td width="800"><img src="Images/5.jpg" /></td>
</tr>
</table>
<div class="lr" id="left" onclick="dong(-1)">
<img src="Images/left.png" />
</div>
<div class="lr" id="right" onclick="dong(1)">
<img src="Images/right.png" />
</div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(a<=-3200)
{
tu.style.marginLeft="0px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
shi =window.setTimeout("huan()",3000);
}
var shi =window.setTimeout("huan()",3000);
function pause()
{
window.clearTimeout(shi);
}
function conti()
{
shi = window.setTimeout("huan()",3000);
}
function dong(ad)
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(ad==-1)
{
if(a==0)
{
tu.style.marginLeft=-3200+"px";
}
else
{
tu.style.marginLeft= (a+800)+"px";
}
}
else
{
if(a==-3200)
{
tu.style.marginLeft=0+"px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
}
}
</script>
CSS3动画
通过CSS3，我们能够创建动画，这样可以在许多网页中取代动画图片、Flash动画以及JavaScript动画。想要创建CSS3动画，需要遵循@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
注：IE需要10及以上。
创建好动画之后需要绑定到某个选择器，否则不会产生任何动画效果。使用animation进行动画捆绑。两个值：动画名称、时长。时间长度必须规定，否则默认为0。也就是表示没有动画效果。
1.动画1
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:red;
animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{ /*创建动画，使用@keyframes规则*/
from {background:red;}
to {background:yellow;}
/*将背景颜色从red改为yellow，时间长度在外部定义*/
}
</style>
</head>
<body>
<div></div><br />
本示例是将此div的背景颜色由红色转变为黄色。<br />
使用@keyframes规则写了一个动画，然后在选择器中将此动画捆绑到了div上。<br />
捆绑使用了animation。时间长度写在选择器中捆绑之后。<br />
必须规定时间长度，否则默认为0。也就是没有动画。
</body>
</html>
2.动画2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:black;
animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{
0% {background:red;}/*动画开始样式*/
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}/*动画结束样式*/
}
</style>
</head>
<body>
<div></div><br />
注意：一上来就进行动画。动画在完成之后会直接变回初始样式（黑色背景）。<br />
<br />
上面动画效果是：开始时为红色背景，25%时为黄色背景，50%时为蓝色背景，100%时为绿色背景。
</body>
</html>
3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
</style>
</head>
<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
动画完成之后还是直接恢复初始样式。
<div></div>
</body>
</html>
4.动画4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s infinite;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
</style>
</head>
<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值，那么本动画将无限执行下去。<br />
<div></div>
</body>
</html>
5.动画5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s infinite linear;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
</style>
</head>
<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
本动画在捆绑选择器时添加了一个infinite值，本动画将无限执行下去。添加了一个linear值，那么运行时会匀速。<br />
<div></div>
</body>
</html>
6.动画6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
</style>
</head>
<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值，那么本动画将无限执行下去。<br />
在无限执行的基础之上增加了一个alternate值，那么本动画会进行正反交替执行。
<div></div>
</body>
</html>
