HTML+CSS实现从右向左展开的过渡动画

雪糕K

已于 2022-03-29 17:59:58 修改

阅读量6k

点赞数 1

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

于 2022-03-29 17:56:22 首次发布

本文链接：https://blog.csdn.net/Cyrios_ykx/article/details/123827703

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

✨ 想要的效果：

🦭 代码示例：

<!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>
      .card-animation {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 100px;
        /* left: 10px; */
        right: 10px;
        transition: width 0.5s, transform 0.5s;
      }

      .card-animation:hover {
        width: calc(90%);
      }
    </style>
  </head>
  <body>
    <div>
      <div class="card-animation"></div>
    </div>
  </body>
</html>

⭐️ 关键点：

如果card-animation这个类名里的属性设置right的话就是从右边向左边。
如果设置的是left的话就是从左边向右边