好吧，我正在尝试用动画来减少 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; } }
2 回答
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
您还可以使用 css 的 Right 和 Position 属性。
div.b {
height: 0%;
border-bottom: 20px solid #c00;
width: 830px;
right: 30px;
position: absolute;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
100% {
width: 10px;
}
<!DOCTYPE html>
<html>
<body>
<div class="b"></div>
</body>
</html>
汪汪一只猫
TA贡献1898条经验 获得超8个赞
只需添加float:right到.box班级即可
.box_LtR{
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;
}
}
.box_RtL{
height:0%;
width:830px;
float:right;
border-bottom:20px solid #c00;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
}
@keyframes increase2 {
100% {
width: 1px;
}
}
<div class="box_LtR">
</div>
<div class="box_RtL">
</div>
其他 ！
.box_LtR{
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;
}
}
.box_RtL{
height:0%;
width:1px;
border-bottom:20px solid #c00;
-webkit-animation: increase2 3s;
-moz-animation: increase2 3s;
-o-animation: increase2 3s;
animation: increase2 3s;
animation-fill-mode: forwards;
}
@keyframes increase2 {
100% {
width: 830px;
}
}
<div class="box_LtR">
</div>
<div class="box_RtL">
</div>
- 2 回答
- 0 关注
- 120 浏览
添加回答
举报
0/150
提交
取消