css3动画中心定位 |css 卷帘效果图

/* 实现中心定位的代码 */
.center {
position: absolute;  /* 要使用绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  /* 通过平移来实现 */
}

上述的代码中，大家使用了绝对定位position: absolute;来将元素相对于页面进行定位。接下来，大家将元素的顶部top和左侧left属性都设置为50%。这时候，元素相对于页面的左上角就已经处于居中的位置了。

但这还没有完，因为元素的中心点是位于其自身的中心点位置。因此，大家需要通过给元素添加一个transform属性来对其进行平移。其中，translate函数可以通过输入负数，将元素自身的宽度和高度的一半进行向左和向上平移，以此来实现中心定位。

在实际的开发中，中心定位常常被用于制作模态框、loading层、轮播图等需要在页面中心居中显示的元素。同时，也可以结合其他CSS3动画效果，使用@keyframes关键字和其它属性来为元素带来更加出彩的展现形式和交互体验。