아래에서 위로 나타나는 이미지를 만들고 싶은데요(feat. 마스크)

아래에서 위로 나타나는 이미지를 만들고 싶은데요(feat. 마스크)

QA

아래에서 위로 나타나는 이미지를 만들고 싶은데요(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>

 

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT