我想用CSS实现下面的动画:
- 圆从中心缩放到100%,因此整个圆都用颜色填充
- 然后再次从中心填充变形为一个围绕圆圈的笔划
我认为最好的方法是使用before或after伪类,这样你就可以对圆进行动画了。我想我遇到的问题是父类上的动画也在伪类中使用。
如果有更好的方法来实现这一点,我愿意接受建议:)
https://codepen.io/Caspert/pen/JjaMgKe
超文本标记语言:<div class="circle"></div>
南部非洲支助中心:
@keyframes parentFromCenter {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes childFromCenter {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.circle {
height: 200px;
width: 200px;
box-sizing: border-box;
border-radius: 50vh;
overflow: hidden;
position: relative;
background: black;
animation: parentFromCenter 1s ease-in;
&::before {
content: "";
height: 90%;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: inherit;
animation: childFromCenter 1s ease-in;
}
}
4条答案
按热度按时间uoifb46i1#
如果你想让内圈成为一个剪切块,并看到u后面的内容,可以使用
box-shadow
达到同样的效果。这是更新我也更新了代码笔:https://codepen.io/raul-rogojan/pen/dyqJxVB
x3naxklr2#
我会把我的两分钱...
vc9ivgsu3#
使用伪元素进行样式设置似乎是个好主意--但我会更进一步,将动画样式与实际元素完全分离。
这个代码片段保持元素本身的完整尺寸,并动画显示before和after伪元素,使其从比例0增长到比例1。
before伪元素是黑色的,并且立即开始增长。after伪元素是白色的,并且等待1秒后才开始增长。
628mspwn4#
你不需要使用伪元素,你可以在圆圈里再加一个div,然后像这样给每个div加上动画:
另外,将
forwards
关键字添加到动画中,以便元素保留动画中的样式。下面是一个例子:https://codepen.io/raul-rogojan/pen/dyqJxVB