아래에서 위로 나타나는 이미지를 만들고 싶은데요(feat. 마스크)
본문
div 안에 이미지를 넣어 height값을 조절하여 아래에서 위로 나타나는 이미지를 만들고 싶은데요 (아래에서 위로 길어지는 그래프처럼)
//html
<div class="graphUp"><img src="images/sec06_02_01.png" alt=""><img src="images/sec06_02_02.png" alt=""></div>
//css
<style>
.sec06 > .cont > div.txt2 .graphUp {position:relative;height:0;overflow: hidden;}
@keyframes graphUp {
0% {height:0;}
100% {height:100%;}
}</style>
이렇게 하니 기준점이 위쪽이라 아래에서 위로 나타나는게 아니라 위에서 아래로 나타다는데 어떻게 해야할까요 ㅠㅠ
답변 2
<div class="graphUp"> <img src="images/sec06_02_01.png" alt=""></div>
<style>
.graphUp img {
width: 100%;
animation: graphUp 2s ease-in-out;
}
@keyframes graphUp {
from {clip-path: inset(100% 0 0 0);;}
to {clip-path: inset(0 0 0 0);;}
}
</style>
감사합니다!
안녕하세요.
원하시는 내용이 맞는지 아래의 코드를 참고해 보세요~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graph Animation</title>
<style>
.sec06 > .cont > div.txt2 .graphUp {
position: relative;
height: 0;
overflow: hidden;
}
.graphUp img {
width: 100%; /* 이미지를 부모 요소에 꽉 차게 표시 */
height: auto; /* 가로 비율에 맞게 높이를 자동 조절 */
}
@keyframes graphUp {
0% {
height: 100%;
}
100% {
height: 0;
}
}
.graphUp.active {
animation: graphUp 2s ease-in-out; /* 애니메이션 활성화 및 지속 시간 설정 */
}
</style>
</head>
<body>
<div class="graphUp">
<img src="images/sec06_02_01.png" alt="">
<img src="images/sec06_02_02.png" alt="">
</div>
<script>
document.querySelector('.graphUp').classList.add('active');
</script>
</body>
</html>
답변 감사합니다! 두분다 채택해드리고싶은데 그럴수 없어 아쉽네요 ㅠㅠ