그럼에도 불구하고

👨‍💻

[Visual Studio Code] opacity / transition-duration 이용해보기 본문

HTML, CSS/Function implementation

[Visual Studio Code] opacity / transition-duration 이용해보기

zenghyun 2022. 11. 2. 00:36

목차

    css에서

     

    opacity와 transition-duration 속성을 이용해보자

     

     

    code

    <!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            border: none;
            padding: 40px;
            position: relative;
            width: 200px;
            height: 200px;
            background-color: darkcyan;
            border: 1px solid black;
        }

        .margin {
            margin: 50px;
        }

        .inner.box {
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            /* opacity : 투명도 */
            transition-duration: 1s;
            /* 애니메이션이 실행되는 시간을 줌 */
        }

        .box:hover .inner.box {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box margin">
        <div class="inner box"> inner </div>
    </div>

    <!-- 
        static 기본성격, 성격이 있다.
     -->
</body>

</html>

     

    opacity는 투명도를 의미한다.

     

    0: 보이지 않음 

    1: 보임 

     

    위의 코드에서는 

     

    inner 박스의 투명도를 0으로 지정해두어 박스가 보이지 않는다. 

     

                                                                                    .box:hover .inner.box {
                                                                                                 opacity: 1;
                                                                                                       }
     

    . box에 마우스 커서를 놓으면 inner박스의 투명도를 1로 바꾼다.

     

     

                                         transition-duration: 1s;: 애니메이션이 실행되는 시간을 1초로 지정한다.
     
     
     
     
     
     
     
     
    Document
    inner
     

    'HTML, CSS > Function implementation' 카테고리의 다른 글

    [Visual Studio Code] 여러가지 transform 이용해보기  (0) 2022.11.07
    [Visual Studio Code] 여러가지 transition 사용해보기  (0) 2022.11.02
    [Visual Studio Code] flex-direction  (0) 2022.11.01
    [Visual Studio Code] justify-content  (0) 2022.11.01
    [Visual Studio Code] scroll-behavior: smooth  (0) 2022.10.29
    'HTML, CSS/Function implementation' Related Articles more
    Comments