728x90
클릭으로 박스 이동하기
CSS 애니메이션 예시
[HTML소스포함]
1. CSS 부분:
- #box: ID가 "box"인 요소에 스타일을 적용합니다.
- transition: 트랜지션(애니메이션) 속성을 설정하여 요소의 스타일 변화에 대한 애니메이션을 지정합니다. 여기서는 left 속성에 1초 동안의 트랜지션을 설정했습니다.
2. HTML 부분:
- <button>: "이동" 버튼이 있고, 클릭 시 moveBox() JavaScript 함수를 호출합니다.
- <div id="box"></div>: 이동할 박스 요소입니다.
3. JavaScript 부분:
- moveBox(): 버튼 클릭 시 호출되는 JavaScript 함수로, "box" 요소의 left 속성을 변경하여 박스를 오른쪽으로 200px 이동시킵니다.
이 코드는 사용자가 "이동" 버튼을 클릭하면
박스가 CSS 애니메이션과 함께
오른쪽으로 200px 이동하는 간단한 예시입니다.
CSS의 transition 속성을 사용하여 부드러운 애니메이션 효과를 적용하고,
JavaScript로 이벤트를 처리하여 동적인 동작을 추가하고 있습니다.
<head>
<style>
/* CSS 스타일: 박스의 초기 스타일과 애니메이션 속성 설정 */
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition: left 1s; /* 'left' 속성에 1초 동안의 트랜지션(애니메이션) 설정 */
}
</style>
</head>
<body>
<h1>CSS 애니메이션 예시</h1>
<!-- 버튼 클릭 시 이동 함수 호출 -->
<button onclick="moveBox()">이동</button>
<!-- 이동할 박스 -->
<div id="box"></div>
<script>
// JavaScript 스크립트: 박스를 이동하는 함수
function moveBox() {
// 'box' 아이디를 가진 요소를 가져옴
const box = document.getElementById("box");
// 'left' 속성을 변경하여 박스를 오른쪽으로 200px 이동
box.style.left = "200px";
}
</script>
</body>반응형
'정보' 카테고리의 다른 글
| [프로그램 제거] Fitbit Coach 삭제, 제거 가능? (0) | 2023.12.22 |
|---|---|
| [HTML소스포함] "마우스를 클릭하면 숫자 증가" JavaScript 예제 (0) | 2023.12.15 |
| [HTML소스포함] "Canvas 게임", JavaScript 예제 (0) | 2023.12.07 |
| [HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript 예제 (0) | 2023.12.07 |
| [HTML소스포함] 텍스트 애니메이션, JavaScript 예제 (0) | 2023.12.07 |
댓글