0

我正在为 Google Chrome 制作一个网络应用程序（因此不需要跨浏览器支持），我正在制作一个动画教程，它将在它首次启动时运行。我通过四个不同的 div 元素-webkit-transistions分别具有宽度和高度属性在屏幕上绘制一个框。然后我使用 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>
4

1 回答 1

1

问题在于您在顶部和右侧 div 的初始位置。如果你对你的 right 和 top 类进行以下更改，我想你会达到你想要的效果。

.right 更改顶部：10px；到底部：10px；

.top 向左改变：13px；向右：13px；

于 2013-10-11T00:28:54.390 回答