CSS3学习（CSS3过渡、CSS3动画）

2022-11-22 22:30:45

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>

<!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>

码农公寓

CSS3过渡：transition属性——专门应对颜色、长度、宽度、位置等变化的过渡

相关文章