소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>애니메이션</title>
    <style>
        .menu1>div{
            width: 200px;
            height: 100px;
            float: left;
            background-color: bisque;
            border-style: solid;
            border-color: white;
            border-width: 10px;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
            transition-duration: 1s;
        }
        .menu1>div:hover{
            color: white;
            background-color: gold;
            height: 300px;
            line-height: 300px;
        }
        .menu2{
            clear: both;
        }
        .menu2>ul{
            list-style: none;
        }
        .menu2>ul>li{
            width: 100px;
            height: 50px;
            background-color: lightgreen;
            text-align: center;
            line-height: 50px;
            margin: 10px;
            transition-duration: 1s;
        }
        .menu2>ul>li:hover{
            width: 300px;
            color: white;
            background-color: aquamarine;
        }
        .menu2>ul>li:nth-child(2){
            transition-duration: ease-in;    /*점점 속도가 느려진다*/
        }
        .menu2>ul>li:nth-child(3){
            transition-duration: ease-out;    /*점점 속도가 빨라진다*/
        }
        .menu2>ul>li:nth-child(4){
            transition-delay: 2.0s;    /*2초 기다린다*/
            transition-duration: 1s;
        }
    </style>
</head>
<body>
    <div class="menu1">
        <div>menu1</div>
        <div>menu2</div>
        <div>menu3</div>
        <div>menu4</div>
    </div>
    <div class="menu2">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
        </ul>
    </div>
</body>
</html>
cs

결과

첫 화면

menu1에 마우스를 가져다 댔을 경우

 transition-duration: 1s; 의  부분에서 1s를 3s로 변경한다면 진행 속도가 느려짐을 볼 수 있다.

menu2에 마우스를 가져다 댔을 경우

menu2의 경우는 서서히 속도가 느려지며 진행되고, menu3의 경우는 서서히 속도가 빨라지며 진행한다.

menu4의 경우는 마우스를 올렸을 때부터 2초가 지나고 움직이는 모습을 볼수있다.


저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/JSP] Form 작성시 자동 Submit 막기  (0) 2019.10.24
[HTML/CSS] 이클립스에서 db연동하여 화면 구성하기  (0) 2016.09.28
[HTML/CSS] 기본적인 웹 화면 만들기  (0) 2016.09.27
[HTML/CSS] 그리드(grid)를 이용한 반응형 웹  (0) 2016.09.27
[HTML/CSS] 그리드(grid)  (0) 2016.09.27

+ Recent posts

티스토리툴바