CSS 过渡效果

最新推荐文章于 2024-10-08 18:22:49 发布

「已注销」

最新推荐文章于 2024-10-08 18:22:49 发布

阅读量3.6k

点赞数 4

分类专栏： # H5C3 文章标签： html css3

本文链接：https://blog.csdn.net/Ares5kong/article/details/115483970

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本文介绍了CSS过渡的基本概念，如何通过transition属性为元素添加平滑的过渡效果，包括transition-property、duration、timing-function和delay的使用示例。通过代码实例演示了如何为第一个盒子设置从蓝色到绿色黄色的渐变过渡效果，持续0.8秒，匀速进行且无延迟。

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

简述:

CSS过渡，就是样式发生变化时，可以看上去更自然，更柔和。想让哪个盒子有过渡样式，就把transition属性加在那个盒子上。

语法:

属性	描述	取值范围
transition-property	应用过渡效果的 CSS 属性名	CSS属性都可以(all, width, color ...)
transition-duration	过渡效果持续时间	秒和毫秒都可以, 1s 1000ms ...
transition-timing-function	过渡效果展示方式	linear(匀速), ease(开始慢、中间快、结束慢)
transition-delay	过渡效果延迟时间	秒和毫秒都可以, 1s 1000ms ...
transition	简写, 按照前四个属性的顺序分别设值	按照前四个属性的顺序分别设值，推荐使用

CSS过渡效果

代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /* 设置盒子的初始样式 */
  div {
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background-color: skyblue;
  }

  /* 鼠标悬停时改变盒子颜色 */
  div:hover {
    background-color: greenyellow;
  }

  /* 第一个盒子设置过度效果 */
  div:first-child {
    transition: all .8s linear 0s;
  }

</style>
<body>
<div>设置过度效果</div>
<div>未设置过度效果</div>
</body>
</html>

运行: