猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何制作 div 沿某个方向宽度减小的动画？

好吧，我正在尝试用动画来减少 div 的宽度。我已经成功做到了，但它从右到左减少。我希望它从左到右减少。请帮忙。


    .box{height:0%;

         width:830px;

         border-bottom:20px solid #c00;



      -webkit-animation: increase 3s;

      -moz-animation:    increase 3s; 

     -o-animation:      increase 3s; 

     animation:         increase 3s; 

     animation-fill-mode: forwards;


     }


    @keyframes increase {



    100% {

       width: 1px;

    }

   }


交互式爱情
浏览 121回答 2
2回答

犯罪嫌疑人X

您还可以使用 css 的 Right 和 Position 属性。div.b {&nbsp; height: 0%;&nbsp; border-bottom: 20px solid #c00;&nbsp; width: 830px;&nbsp; right: 30px;&nbsp; position: absolute;&nbsp; -webkit-animation: increase 3s;&nbsp; -moz-animation: increase 3s;&nbsp; -o-animation: increase 3s;&nbsp; animation: increase 3s;&nbsp; animation-fill-mode: forwards;}@keyframes increase {&nbsp; 100% {&nbsp; &nbsp; width: 10px;&nbsp; }<!DOCTYPE html><html><body>&nbsp; <div class="b"></div></body></html>
0

汪汪一只猫

只需添加float:right到.box班级即可&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .box_LtR{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:0%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:830px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-bottom:20px solid #c00;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation: increase 3s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-animation:&nbsp; &nbsp; increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-animation:&nbsp; &nbsp; &nbsp; increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation-fill-mode: forwards;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @keyframes increase {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.box_RtL{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:0%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:830px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-bottom:20px solid #c00;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation: increase2 3s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-animation:&nbsp; &nbsp; increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-animation:&nbsp; &nbsp; &nbsp; increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation-fill-mode: forwards;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @keyframes increase2 {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; <div class="box_LtR">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="box_RtL">&nbsp; &nbsp; </div>其他 ！&nbsp; &nbsp; .box_LtR{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height:0%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:830px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-bottom:20px solid #c00;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation: increase 3s;&nbsp; &nbsp; &nbsp; &nbsp; -moz-animation:&nbsp; &nbsp; increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-animation:&nbsp; &nbsp; &nbsp; increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;increase 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animation-fill-mode: forwards;&nbsp;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; @keyframes increase {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 1px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;.box_RtL{&nbsp; &nbsp; &nbsp; &nbsp;height:0%;&nbsp; &nbsp; &nbsp; &nbsp;width:1px;&nbsp; &nbsp; &nbsp; &nbsp;border-bottom:20px solid #c00;&nbsp;&nbsp; &nbsp; &nbsp; -webkit-animation: increase2 3s;&nbsp; &nbsp; &nbsp; -moz-animation:&nbsp; &nbsp; increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;-o-animation:&nbsp; &nbsp; &nbsp; increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;animation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;increase2 3s;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;animation-fill-mode: forwards;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; @keyframes increase2 {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 830px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }<div class="box_LtR"></div><div class="box_RtL"></div>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5