css 키프레임 관련 애니메이션 질문!
본문
아래 이미지를 0도 부터 360도까지 시계방향으로 차오르면서 보이는 효과를 하고싶은데
관련 조언 또는 링크를 받을 수 있을까요?
검색을 했는데 한계가 와서...
<img src="<?php echo G5_THEME_IMG_URL ?>/anime.png" id="animeIMG">
원형 차트를 시계방향으로 차오르게 보이려고 진행하는 부분입니다..
답변 1
<!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>
답변을 작성하시기 전에 로그인 해주세요.
