一、动画 - 过渡效果transition

gaoya7305

已于 2023-06-19 09:02:49 修改

阅读量1.4k

点赞数 1

分类专栏： html+css 文章标签：前端 css css3

于 2023-06-14 09:06:59 首次发布

本文链接：https://blog.csdn.net/gaoya7305/article/details/131161282

版权

内容目录：

过渡动画；
过渡动画的属性；

一、过渡动画

 过渡（transition）作用：
   - 通过过渡可以指定一个属性发生变化时的切换方式
   - 通过过渡可以创建一些非常好的效果，提升用户的体验

现在我们通过一个小项目来了解这个过渡动画用在哪里,注意这里不借助js,是纯css来实现？

<!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>
      * {
     
        margin: 0;
        padding: 0;
      }
      .box1 {
     
        width: 500px;
        height: 500px;
        background-color: silver;
        /* 开启bfc,防止重叠 */
        overflow: hidden;
      }

      .box1 div {
     
        width: 100px;
        height: 100px;
        /* 特别注意，当这里设置margin的时候，因为可能上边距重贴，导致无法正常下移动
      所以必须在box1上，写 overflow: hidden;*/
        margin-bottom: 100px;
      }
      .box2 {
     
        background-color: green;
      }
    </style>
  </head>
  <body>