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

内部绝密传真282期

微信二维码