WEB/강의 메모

[실습] 보더 애니메이션

스용공주 2024. 11. 17. 23:07
728x90
728x90

이번 글은 border를 활용한 탭 메뉴 애니메이션 실습에 대한 글이다.

 

 

* border는 늘어날 수 없으므로 가상클래스로 만들어줘야함

 

 

자기자신의 X축에서 크기값을 50% 빼줘야함 (정중앙 배치)

left:50%;
transform: translateX(-50%);

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <ul class="gnb">
        <li><a href="#none">HOME</a></li>
        <li><a href="#none">ABOUT</a></li>
        <li><a href="#none">SERVICE</a></li>
        <li><a href="#none">PORTFOLIO</a></li>
        <li><a href="#none">CONTACT</a></li>
    </ul>
    
    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    margin : 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}
a {
    text-decoration: none;
    color : #222;
}
.gnb {
    list-style: none;
    padding : 0;
    width: 650px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding : 50px 30px;
    display: flex;
}
.gnb li {
    /* border : 1px solid red;
    box-sizing: border-box;
    float:left;
    width: 120px;
    text-align: center; */
    flex:1;
    text-align: center;
}
.gnb li a {
    font-size: 14px;
    position : relative;
}
.gnb li a:before {
    content: '';
    position: absolute;
    background-color: dodgerblue;
    height: 2px;
    width: 0;
    bottom: -10px;
    left:50%;
    transform: translateX(-50%);
    transition: 0.5s;
}
.gnb li a:hover:before {
    width: 100%;
}

 

 

728x90
728x90