在HTML中实现动画的方法-创新互联

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>

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

<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

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证，机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

网站题目：在HTML中实现动画的方法-创新互联
当前链接：https://www.cdcxhl.com/article24/ddpsce.html

成都网站建设公司_创新互联，为您提供静态网站、网页设计公司、网站营销、服务器托管、面包屑导航、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容