CSS变形、过渡的实例分析

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

　　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变形、过渡的实例分析"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。