css3动画怎样能从下往上慢慢升上去 代码怎么写

像树干一样... 像树干一样 展开
 我来答
大千视界影视大全
2015-08-19 · TA获得超过377个赞
知道小有建树答主
回答量:72
采纳率:0%
帮助的人:87.5万
展开全部
<!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 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页
本回答由博思aippt提供
百度网友9ccce6b
2018-03-31 · TA获得超过3580个赞
知道小有建树答主
回答量:40
采纳率:0%
帮助的人:5688
展开全部

这只是个演示的demo,方法就是这样,animation-fill-mode: forwards;这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式