CSS 너비 속성을 아래에서 위로 이동하는 방법

Google 크롬 용 웹 앱 (크로스 브라우저 지원 필요 없음)을 만들고 처음 부팅 할 때 실행할 애니메이션 자습서를 만들고 있습니다. width 및 height 속성에 대해 각각 -webkit-transistions 인 div 요소가 4 개있는 것으로 상자를 그립니다. 그런 다음이 테두리에 클래스를 추가하고 화면에 그릴 수 있도록 자바 스크립트를 사용하고 있습니다. 내가 오른쪽의 경계에 도착할 때까지 그것은 잘 작동하고 있었다. 나는 내 경계가 이처럼 그리기를 원한다 : 왼쪽이 내려 가고, 아래가 오른쪽으로 가고, 오른쪽이 올라간다. 그리고 나서 위로가 간다. 내가 올바른 경계에 도착할 때까지 모든 것이 제대로 작동했습니다. 아래에서 위 대신 위에서 아래로 그립니다. -webkit-transform:rotate(180deg)으로 회전하려고 시도했지만 실제로 도움이되지 않았습니다. 코드는 다음과 같습니다.CSS 너비 속성을 아래에서 위로 이동하는 방법

<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>

출처

2013-10-11 Toastrackenigma

문제는 처음과 오른쪽 div의 위치에 있습니다. 오른쪽 및 최고 클래스를 다음과 같이 변경하면 원하는 효과를 얻을 수 있다고 생각합니다.

.right 변경 상단 : 10px; 아래쪽 : 10px;

.top 변경 왼쪽 : 13px; 오른쪽에서 13px;

출처

2013-10-11 00:28:54 mbrightenfield

효과가있었습니다. 정말 고맙습니다 :) – Toastrackenigma

CSS 너비 속성을 아래에서 위로 이동하는 방법

답변

관련 문제