这可以通过单个div和一[伪元素来实现
::before：
在
#banner
被赋予border-radius: 50%
创建一个圆圈，并overflow: hidden
夹及其子里面所述
::before
伪元件被动画化以100％的高度，并且动画效果使用在100％暂停的forwards
值。它从底部开始使用bottom: 0
背景图像将在地方上的黑色和蓝色背景的应用
#banner
和#banner::before
兼容性： IE10
+和所有现代浏览器。带
-webkit-前缀的属性很可能不再是关键帧动画所必需的。在caniuse.com上查看浏览器兼容性表
工作实例
我添加了
cubic-bezier(.2,.6,.8,.4)@ChrisSpittlesanswer中解释的内容。它提供了整洁的效果！
#banner { width: 300px; height: 300px; position: relative; background: #000; border-radius: 50%; overflow: hidden;}#banner::before { content: ''; position: absolute; background: #04ACFF; width: 100%; bottom: 0; animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;}@keyframes wipe { 0% { height: 0; } 100% { height: 100%; }}<div id="banner"></div>
