CSS变形、过渡的实例分析-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

Document

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

2、变形transform

2D变形

移动translate(x,y)

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

Document

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

Document

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


本文标题:CSS变形、过渡的实例分析
浏览地址:http://kswsj.cn/article/iecdcg.html

其他资讯