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으로 인해 애니메이션을 진행하면서 서서히 채워지는 것 |
결과
WE MAKE YOUR
MORE
ATTRACTIVE