1、transition
属性
transition(过渡) | 属性、秒数、函数、延迟 |
---|
属性 | transition-property |
秒数 | transition-duration |
函数 | transition-timing-function |
延迟 | transition-delay |
设置旋转点(x,y) | transform-origin |
2、transition-timing-function
函数属性
transition-timing-function | 函数属性值 |
---|
ease | 开始和结束慢,中间快。默认值 |
linear | 匀速 |
ease-in | 开始慢 |
ease-out | 结束慢 |
ease-in-out | 和ease类似,但比ease幅度大 |
3、实例(旋转放大)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
transition: transform 1s;
}
.box:hover {
transform: rotate(360deg) scale(2);
}
</style>
</head>
<body>
<div class="box">Hello world!</div>
</body>
</html>