그럼에도 불구하고

👨‍💻

[Visual Studio Code] mask 이용한 로고 만들기 본문

HTML, CSS/Function implementation

[Visual Studio Code] mask 이용한 로고 만들기

zenghyun 2022. 11. 7. 14:16

mask를 이용하여 로고를 만들어보자

 

 

 

test.html

<!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>
        .mask {
            width: 1000px;
            height: 500px;
            background-color: pink;
            font-size: 100px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .mask > p {
            position: absolute; left: 10px; bottom: 0;
            overflow: hidden;
            height: 0px; width: 1000px;
            animation: mask 3s forwards infinite;
        }

        .mask span {
            display: block;
            position: absolute;
            bottom: 0; left: 0; 
            height: 500px; width: 1000px;
        }
        @keyframes mask{
            100% {height: 500px;}

        }
    </style>
</head>

<body>
    <div class="mask">
        <p>
            <span>
                WE MAKE YOUR <br>
                MORE <br>
                ATTRACTIVE
            </span>
        </p>
    </div>
 
</body>

</html>

 

 
.mask {
            width: 1000px;
            height: 500px;
            background-color: pink;
            font-size: 100px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            position: relative;
            left: 50px;
            top: 50px;
        }
 
 
＊ mask라는 이름을 가진 div 클래스의 기본설정
 
     
 .mask > p {
            position: absolute; left: 10px; bottom: 0;
            overflow: hidden;
            height: 0px; width: 1000px;
            animation: mask 3s forwards infinite;
        }

 

 

p 태그의 position을 absolute로 지정 -> p 태그의 부모는. mask이다. 

 

mask 속성을 이용하기 위해 overflow:hidden으로 내용을 감춰놓음

 

height : 0px인 이유 @keyframes mask에서 0% ~ 100%로 진행되면서 height를 500px로 맞출 것이기 때문

 

 

 

 

.mask span {
            display: block;
            position: absolute;
            bottom: 0; left: 0;
            height: 500px; width: 1000px;
        }
 
 
 
span 태그 안에 들어있는 내용을 div 태그와 같은 너비와 높이로 지정해놓고 있음 
 
즉, 
 
div 태그와 span 태그가 겹쳐있음
그러나, p태그의 높이가 0px이여서 보이지 않음 
@keyframes으로 지정한 높이 500px으로 인해 
애니메이션을 진행하면서 서서히 채워지는 것

 

 

결과

 

Document

WE MAKE YOUR
MORE
ATTRACTIVE

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

[Visual Studio Code] 여러가지 shadow 이용해보기  (0) 2022.11.13
[Visual Studio Code] 가로 / 세로 메뉴바 만들기  (1) 2022.11.13
[Visual Studio Code] 애니메이션 반복하기  (0) 2022.11.07
[Visual Studio Code] 이미지 위에 글 띄우기  (0) 2022.11.07
[Visual Studio Code] transform-origin  (0) 2022.11.07
'HTML, CSS/Function implementation' Related Articles more
Comments