创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to",等价于 0% 和 100%.
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
以下为上下运动的代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3使用animation和@keyframes制作动画_何问起</title>
<meta charset="utf-8" />
<style>
@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}
#hovertreekf{
width:80px;height:80px;
border:1px solid red;
position:absolute;
background:url（） no-repeat center;
animation:hovertreemove /*动画样式名称*/
1s /*动画时间*/
linear /*线性运动*/
infinite /*无线播放*/
alternate/*往返动画*/;
}
a{color:blue;text-decoration:none;} </style>
</head>
<body><a href="" target="_blank">说明</a>
<div id="hovertreekf"></div>
</body>
</html>
<div class="in_right_box">
<ul class="silder_list" >
<li>
<a href="http://www.bdqcp.net/" target="_blank">保定长途汽车站</a>
</li>
</ul>
</div>
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to",等价于 0% 和 100%.
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
以下为上下运动的代码：
复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3使用animation和@keyframes制作动画_何问起</title>
<meta charset="utf-8" />
<style>
@keyframes hovertreemove
{
from {top:30px;}
to {top:130px;}
}
#hovertreekf{
width:80px;height:80px;
border:1px solid red;
position:absolute;
background:url（） no-repeat center;
animation:hovertreemove /*动画样式名称*/
1s /*动画时间*/
linear /*线性运动*/
infinite /*无线播放*/
alternate/*往返动画*/;
}
a{color:blue;text-decoration:none;} </style>
</head>
<body><a href="" target="_blank">说明</a>
<div id="hovertreekf"></div>
</body>
</html>
<div class="in_right_box">
<ul class="silder_list" >
<li>
<a href="http://www.bdqcp.net/" target="_blank">保定长途汽车站</a>
</li>
</ul>
</div>
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
