Hello, World!
이전 목록 다음
채택완료

css 키프레임 관련 애니메이션 질문!

바바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 12개월 전 4,494

아래 이미지를 0도 부터 360도까지 시계방향으로 차오르면서 보이는 효과를 하고싶은데

관련 조언 또는 링크를 받을 수 있을까요?

검색을 했는데 한계가 와서...

Copy 
<img src="<?php echo G5_THEME_IMG_URL ?>/anime.png" id="animeIMG">

1846272527_1742347137.8361.png

원형 차트를 시계방향으로 차오르게 보이려고 진행하는 부분입니다..

css
|

답변 1개

채택된 답변
+20 포인트
Glitter Gim
프로필 보기이 회원 글보기이 회원의 댓글보기
 12개월 전

Copy 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원형 차트 애니메이션</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .image-wrapper {
            position: relative;
            width: 200px; /* 이미지 크기 */
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
        }

        #animeIMG {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            clip-path: circle(0% at 50% 50%);
            animation: revealCircle 3s linear forwards;
        }

        @keyframes revealCircle {
            0% {
                clip-path: circle(0% at 50% 50%);
            }
            100% {
                clip-path: circle(100% at 50% 50%);
            }
        }
    </style>
</head>
<body>

    <div class="image-wrapper">
        <img src="<?php echo G5_THEME_IMG_URL ?>/anime.png" id="animeIMG">
    </div>

</body>
</html>

답변을 작성하려면 로그인이 필요합니다.