css（过度）

最新推荐文章于 2024-01-28 19:18:07 发布

APLL_

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量241

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/APLL_/article/details/123180097

版权

本文介绍了CSS中的transition属性，包括transition-property、transition-duration和transition-timing-function等关键概念，并通过实例展示了如何创建元素的平滑过渡效果。文章强调了过度效果在网页交互设计中的重要性，特别是匀速和加速等速度模式的使用。

摘要由CSDN通过智能技术生成

<style>

* {

margin: 0;

padding: 0;

}

.box {

width: 500px;

height: 300px;

border: 1px solid #000;

margin: 50px auto;

background-color: skyblue;

position: relative;

overflow: hidden;

}

h2 {

text-align: center;

display: block;

width: 500px;

height: 300px;

}

p {

float: left;

width: 500px;

height: 200px;

display: block;

position: absolute;

top: 300px;

left: 0;

transition: all 3s;

}

.box:hover p {

top: 50px;

}

</style>

<p>

属性：transition<br>1、属性值：transition-property (要产生过度效果的css属性，多个属性加逗号)<br>2、属性值：transition-duration (过度效果时长)<br> 3、属性值：transition-timing:function (速度方式)<br>3-1、linear(匀速)<br>3-2、ease(减速)<br>3-3、ease-in(逐渐加速)

</p>

</div>