css 키프레임 관련 애니메이션 질문! 채택완료
바트컨트롤
7개월 전
조회 3,551
아래 이미지를 0도 부터 360도까지 시계방향으로 차오르면서 보이는 효과를 하고싶은데
관련 조언 또는 링크를 받을 수 있을까요?
검색을 했는데 한계가 와서...
</p>
<p><img src="<?php echo G5_THEME_IMG_URL ?>/anime.png" id="animeIMG"></p>
<p>원형 차트를 시계방향으로 차오르게 보이려고 진행하는 부분입니다..
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
7개월 전
</p>
<p><!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;
}</p>
<p> .image-wrapper {
position: relative;
width: 200px; /* 이미지 크기 */
height: 200px;
border-radius: 50%;
overflow: hidden;
}</p>
<p> #animeIMG {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
clip-path: circle(0% at 50% 50%);
animation: revealCircle 3s linear forwards;
}</p>
<p> @keyframes revealCircle {
0% {
clip-path: circle(0% at 50% 50%);
}
100% {
clip-path: circle(100% at 50% 50%);
}
}
</style>
</head>
<body></p>
<p> <div class="image-wrapper">
<img src="<?php echo G5_THEME_IMG_URL ?>/anime.png" id="animeIMG">
</div></p>
<p></body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인