在HTML中实现动画的方法
来源:互联网 发布:有关创业的软件 编辑:程序博客网 时间:2024/06/06 14:06
Animation功能中实现动画的方法
方法
属性值的变化速度
linear
在动画开始与结束时以同样速度惊醒改变
ease-in
动画开始时速度很慢,然后速度沿曲线值进行加快
ease-out
动画开始时速度很快,然后速度沿曲线值进行放慢
ease
动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢
ease-in-out
动画开始时速度很慢,然后速度沿曲线值进行加快,然后再沿曲线值进行放慢
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=gb2312”/>
<title>实现动画的各种方法的比较示例</title>
</head>
<styletype=“text/css”>
@keyframesmycolor{
0%{
width:100px;
height:100px;
}
100%{
width:500px;
height:500px;
}
}
div{
background-color:red;
width:500px;
height:500px;
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:ease-out;
}
</style>
<body>
<div>
</div>
</body>
</html>
通过以上代码我们可以看出Animations功能中各种实现的方法的区别,该示例中有一个div元素,页面打开时,该div元素在5秒内从长100px、宽100px扩大到长500px、宽500px,通过改变Animation-timing-function属性的属性值,然后观察div元素额长度和宽度再整个动画中的变化速度,可以看出实现动画的各种方法之间的区别。
最后介绍下如何使用animation功能来实现网页设计中的一种经常使用的动画效果——网页的淡入效果。通过再开始帧与结束帧中改变页面的opacity属性的属性值来实现页面淡入的效果。代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<htmlxmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type”content=“text/html; charset=gb2312”/>
<title>实现网页淡入的效果示例</title>
</head>
<styletype=“text/css”>
@keyframesfadein{
0%{
opacity:0;
background-color:white;
}
100%{
opacity:1;
background-color:white;
}
}
</style>
<body>
示例文字
</body>
</html>
欢迎加入技术QQ群:364595326
- 在HTML中实现动画的方法
- html修炼养成--关于在swiper中添加动画的方法
- 用VML语言在html中画图和实现动画
- 在HTML中创建动画
- 在HTML中嵌入Javasript的方法
- 在HTML中使用CSS的方法
- 在HTML中引入CSS的方法
- 在html中引入CSS的方法
- 在HTML中嵌入Javasript的方法
- 在Html中引入CSS的方法
- 在html中引入CSS的方法
- 在HTML中引入CSS的方法
- 在html中引入CSS的方法
- 在HTML中实现动态的时钟
- HTML中树的实现方法
- 解析在Android中为TextView增加自定义HTML标签的实现方法
- 在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
- HTML实现遮罩层的方法 HTML中如何使用遮罩层
- android基础知识----上滑标题变浅变透明
- 录频
- 第三周报告
- solr详细教程。(你想要的这里都有..)
- 割点 割边
- 在HTML中实现动画的方法
- 2-SAT——POJ 3683
- 401. Binary Watch
- 使用moy快速开发后台管理系统(一)
- iOS应用架构谈 本地持久化方案及动态部署
- 打鼹鼠
- 在VirtualBox中,设置Ubuntu分辨率
- Jasperreport导出pdf内容展示不完全处理
- Nginx常用命令