如何用圆形动画显示背景图像？

Question

我有这样的图片。

我需要对像

这样的圆的圆锥部分进行动画处理

在零秒无圈时，像这样在0n 5秒半圈时。

如何借助CSS做到这一点？我只想隐藏在它前面，然后慢慢地开始出现顺时针方向。

Answer 1

将此添加到您的CSS

img {
    animation: anim 2s infinite ease-in-out;
}
@keyframes anim {
	0% {
		opacity: 0;
	}
	10% {
		clip-path: circle(100px at bottom);
	}
        35% {
            clip-path: circle(100px at left);
        }
	65% {
		clip-path: circle(100px at top);
	}
	100% {
		clip-path: circle(100px at right);
	}
}

<img src='https://i.stack.imgur.com/7RspU.png'>