CSS 在悬停时将背景颜色从 50% 过渡到 100%

发布于 2025-01-09 06:08:55 字数 872 浏览 0 评论 0原文

我正在尝试在悬停时创建一个简单的缓入过渡，其中背景颜色从视口的 50% 增加到视口的 100%。

<!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>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.5s ease-in-out;
      }

      .container:hover{
        /* width: 100% */
        }

    </style>

  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

我尝试了多种组合，但无法顺利过渡。有没有一种直接的方法可以通过 css 转换来做到这一点，或者我是否需要考虑使用 Javascript？

原文

I am trying to create a simple ease-in-out transition on hover where the background colour increases from 50% of the viewport to 100% of the viewport.

<!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>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.5s ease-in-out;
      }

      .container:hover{
        /* width: 100% */
        }

    </style>

  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

I have tried numerous combinations but cannot get a smooth transition. Is there a straight forward way to do this with a css transition or do I need to be looking towards using Javascript?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南薇 2025-01-16 06:08:55

<!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>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.70s ease-in-out;
      }

      .container:hover{
        width: 100%
        }

    </style>

  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

我认为这是一个平稳的过渡。

<!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>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.70s ease-in-out;
      }

      .container:hover{
        width: 100%
        }

    </style>

  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

I think this is a smooth transition.

回复收藏 0 原文

~没有更多了~