码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2016-12-03 20:47:31      阅读：325      评论：0      收藏：0      [点我收藏+]

标签：默认   first   htm   query   lower   charset   控制   sha   element   

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

通过CSS3，我们可以在不使用Flash和JavaScript的情况下，为当前某元素从某样式改变为某样式的时候添加过渡效果。我们仅仅使用到了一个transition属性，专门来写过渡从一个样式到另一个样式过渡时所花费的时间，以秒为单位。若时长不规定，默认为0，即没有过渡时间。在使用这个过渡效果的时候，我们使用了类似于超链接的l(link)、v(visited)、h(hover)、a(active)样式的控制。此过渡时间可以规定背景改变、位置改变、及上面看到过的2D转换、3D转换再加上位置改变等样式变化需要使用的时间长度。

 

一、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="images/bg_flower.gif" width="200" height="200" /></td>
            <td><img src="images/border.png" width="200" height="200" /></td>
            <td><img src="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>

技术分享

 

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

标签：默认   first   htm   query   lower   charset   控制   sha   element   

原文地址：http://www.cnblogs.com/Strive-count/p/6129215.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！