css动画属性+垂直居中

最新推荐文章于 2024-08-28 09:51:36 发布

Syyyyy_

最新推荐文章于 2024-08-28 09:51:36 发布

阅读量880

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_43859703/article/details/101230594

版权

本文介绍了CSS3中的transform属性，用于元素的转换，如translate实现垂直水平居中；transtion用于过渡动画，包含时间、方式和延迟参数；以及如何使用animation和@keyframes创建自定义动画，实现动画结束后返回初始状态。

摘要由CSDN通过智能技术生成

一、transform

transform：并不是动画，是一种转换，对元素进行角度、长款、位置的一种转换
translate是tranform的一个属性！！！！！！！！

translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。

可实现元素的垂直水平居中

    <div class="box">
        <div class="little"></div>
    </div>

.box{
    position: relative;
    width:200px;
    height:200px;
    border: 1px solid black;
    box-sizing: border-box;
}
.little{
    position: absolute;
    width:100px;
    height:100px;
    border: 1px solid red;
    box-sizing: border-box;
    left:100px;
    top:100px; 
    transform: translateX(-50%) translateY(-50%)
}

left、top为父元素的一半，然后通过translate移动子元素的50%回去