我正在为Google Chrome开发一个网络应用程序（因此不需要跨浏览器支持），并且正在制作一个动画教程，该教程将在首次启动时运行。我在屏幕上绘制一个框，方法是使用四个不同的div元素，分别使用-webkit-transistions的width和height属性。然后，我使用javascript将类添加到这些边框，并使它们在屏幕上绘制。一切顺利，直到我到达右侧边界。我希望我的边界绘制如下：左侧向下，底部向右，右侧向上，然后顶部向左。一切正常，直到我到达正确的边界。它从上到下绘制，而不是从下到上绘制。我尝试使用-webkit-transform:rotate(180deg)旋转它，但这并没有真正的帮助。这是代码：
<html>
<head>
<style>
button {
background-color:lime;
background-image:-webkit-linear-gradient(top, lime, green);
border:solid 1px 000000;
cursor:hand;
border-radius:10;
outline:none;
width:50px;
}
.left {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
-webkit-transition:height 2s;
}
.bottom {
width:0%;
height:5px;
border-top:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
-webkit-transition:width 2s;
}
.right {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
position:absolute;
right:11px;
top:10px;
-webkit-transform:rotate(180deg);
-webkit-transition:height 2s;
}
.top {
width:0%;
height:5px;
border-bottom:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
top:7px;
-webkit-transition:width 2s;
}
.leftdraw {
height:99%;
}
.bottomdraw {
width:98%;
}
.rightdraw {
height:96.5%;
}
.topdraw {
width:98%;
}
</style>
<script>
function begintut() {
document.getElementById("left").classList.add("leftdraw")
setTimeout("document.getElementById('bottom').classList.add('bottomdraw')",2000)
setTimeout("document.getElementById('right').classList.add('rightdraw')",4000)
setTimeout("document.getElementById('top').classList.add('topdraw')",6000)
}
</script>
<title>Tutorial - Inscribe</title>
</head>
<body onload="begintut()">
<div class="left" id="left"></div><div class="bottom" id="bottom"></div><div class="right" id="right"></div><div class="top" id="top"></div>
</body>
</html>
最佳答案
问题在于您的最高和最右div的初始位置。如果您对右侧和顶部类别进行以下更改，我认为您将达到预期的效果。
。对
更改top：10px;到底部：10像素;
。最佳
左移：13px；右边：13px;