您的位置：首页 > Web前端 > CSS

CSS3快速上手之15：动画

2016-10-10 21:24 357 查看
1.代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页title</title>
<style>

/*---范例 1：变换颜色---*/
.c1
{
width:50px;
height:50px;
background:red;
/*---把 "change_color" 动画捆绑到 c1类，时长：2 秒---*/
animation:change_color 1s;
-webkit-animation:change_color 1s; /* Safari and Chrome */
}

@keyframes change_color
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes change_color /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

/*---范例 2：按照时间比例改变颜色---*/
.c2
{
width:50px;
height:50px;
background:red;
/*---把 "change_color_percent" 动画捆绑到 c2类，时长：5 秒---*/
animation:change_color_percent 5s;
-webkit-animation:change_color_percent 5s; /* Safari and Chrome */
}

@keyframes change_color_percent
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-moz-keyframes change_color_percent /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes change_color_percent /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-o-keyframes change_color_percent /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

/*---范例 3：改变背景色和位置，并重复执行。---*/
.c3
{
width:50px;
height:50px;
background:red;
position:relative;
/*---把 "move_and_changecolor" 动画捆绑到 c3类，时长：4 秒---*/
animation:move_and_changecolor 4s linear 1s infinite alternate;
-webkit-animation:move_and_changecolor 4s linear 2s infinite alternate; /* Safari and Chrome */
}

@keyframes move_and_changecolor
{
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 move_and_changecolor /* 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>范例一：网页开始时是红色方块，然后有1秒的时间，方块由红变黄，结束后变回红色。</p>
<div class="c1"></div>

<p>范例二：网页开始时是红色方块，然后有5秒的时间，方块由红-->黄-->蓝-->绿，结束后变回红色。</p>
<div class="c2"></div>

<p>范例三：改变背景色和位置，并重复执行。。</p>
<div class="c3"></div>

</body>
</html>

2.结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航