CSS变形、过渡的实例分析

这篇文章主要介绍“CSS变形、过渡的实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS变形、过渡的实例分析”文章能帮助大家解决问题。

子洲网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。成都创新互联2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

1、过渡transition

过渡属性用法：transition:ransition-propertytransition-durationtransition-timing-functiontransition-delay

可以一起指定也可以分别单独指定

transition-property:是要过渡的属性（如width，height），all是所有都改变。

transition-duration：花费的时间，单位为s或ms

transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种

ease=>逐渐慢下来（默认值）linear=>匀速ease-in=>加速ease-out=>减速ease-in-out=>先加速在减速

transition-delay延迟时间，单位为s或ms

结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。

2、变形transform

2D变形

移动translate(x,y)

移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。

点击之后盒子进行了移动。用于让定位的盒子居中的代码入下

关于“CSS变形、过渡的实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。