• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Transition</title>
7
    <style>
8
        div.keyboard {
9
            background-color: orange;
10
            height: 50px;
11
            width: 100px;
12
            margin: 10px;
13
            -webkit-transition: width 1s;
14
            transition: width 1s;
15
        }
16
        div.keyboard:hover { width: 300px; }
17
    </style>
18
</head>
19
​
20
<body>
21
​
22
    <h1>요소의 너비 변화</h1>
23
    <div class="keyboard"></div>
24
    <div class="keyboard"></div>
25
    <div class="keyboard"></div>
26
    <div class="keyboard"></div>
27
    <div class="keyboard"></div>
28
    <p>각 키보드 위로 마우스를 올려놔 보세요!!</p>
29
​
30
</body>
31
​
32
</html>