电话
13363039260
CSS 小结笔记之变形、过渡与动画的示例
2024-01-17 11:24 小编
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 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <style> p{ width:100px; height:200px; background-color:aqua; transition:width2sease-in-out0.5s; } p:hover{ width:500px; } </style> </head> <body> </body> </html> 结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
猜你喜欢
联络方式：
13363039260
微信二维码 