好吧，我正在嘗試用動畫來減少 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 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消