css3动画中间缩小 |css3内发光代码

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
animation: zoom-out 5s ease-out forwards;
}
@keyframes zoom-out {
from {
transform: translate(-50%, -50%) scale(1);
}
to {
transform: translate(-50%, -50%) scale(0.2);
}
}

在上面的代码中，大家可以看到使用了一个.center类来对元素进行处理。首先，大家使用了绝对定位将元素放置在页面的正中央，然后通过“transform: translate(-50%, -50%)”来让元素保持水平和垂直居中。最后，大家使用了一个“scale(1)”来将元素的大小设置为原始大小。

接下来，大家使用了一个名为“zoom-out”的关键帧来定义了元素的动画效果。在这个关键帧中，大家定义了从原始大小到缩小效果的变化。在from和to中，大家使用了“transform：translate（-50％，-50％）scale（1）”和“transform：translate（-50％，-50％）scale（0.2）”的属性值来设置元素的大小和位置。最后，大家设置了5秒钟的动画时间，并使用了“forwards”来让元素在动画结束时保持缩小状态。

总的来说，中间缩小的动画效果可以增强页面的视觉效果，并帮助用户更好地理解页面的结构。如果您需要在您的下一个项目中使用这种效果，只需将上面的代码复制到您的CSS文件中，并将类名应用于要缩小的元素即可。