过渡效果中有：
1平滑效果
2线性过渡
3由慢到快
4由快到慢
5慢-快-慢 等等 具体参考 w3chool
例如：
<body>
<div class="out">
<div class="inner1">线性过渡</div>
<div class="inner3">由慢到快</div>
<div class="inner4">由快到慢</div>
<div class="inner2">平滑过渡</div>
<div class="inner5">由慢到快再到慢</div>
</div>
</body>
CSS:
| .out { | |
| width: 800px; | |
| padding: 1px; | |
| background-color: #999999; | |
| } | |
| .out div { | |
| width: 100px; | |
| height: 100px; | |
| margin: 25px; | |
| background-color: #21bbca; | |
| font-size: 12px; | |
| text-align: center; | |
| line-height: 100px; | |
| } | |
| .inner1 { | |
| -webkit-transition: all 4s linear; | |
| } | |
| .inner2 { | |
| -webkit-transition: all 4s ease; | |
| } | |
| .inner3 { | |
| -webkit-transition: all 4s ease-in; | |
| } | |
| .inner4 { | |
| -webkit-transition: all 4s ease-out; | |
| } | |
| .inner5 { | |
| -webkit-transition: all 4s ease-in-out; | |
| } | |
| .out:hover div { | |
| margin-left: 75%; | |
| -webkit-transform: rotate(360deg); | |
| border-radius: 50%; | |
| } |
时间： 2024-08-04 23:23:23