2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:absolute;
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
animation-fill-mode: forwards;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:500px; bottom:50px;}
25% {background:red; left:500px;height:130px;bottom:50px;}
50% {background:red; left:500px; height:160px;bottom:50px;}
75% {background:red; left:500px;height:190px; bottom:50px;}
100% {background:red; left:500px; height:210px;bottom:50px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这只是个演示的demo,方法就是这样,animation-fill-mode: forwards;这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。其他代码都比较简单,不懂随时问我。
希望能够帮助到你,望采纳!
博思aippt
2024-07-20 广告
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询