.box{ width: 100px; height: 100px; background: #ddd; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /*居中*/ transform: scale(1); /*初始状态*/ transition: transform 0.3s ease-out; /*过渡效果*/ } .box:hover{ transform: scale(1.1); /*放大*/ }
上面的代码中,大家首先给一个class为box的元素设置宽度和高度,然后使用了绝对定位将其居中。接着,大家使用transform属性将其初始状态设置为1。然后在:hover伪类中使用transform将其放大至1.1,同时过渡时间设置为0.3s,过渡动画效果设置为ease-out。
通过这些简单的代码,大家便能够实现中心放大动画效果。大家可以根据自己的需求来调整过渡的时间和过渡效果,达到更好的效果。