您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS：实现 hover 时文字波浪式变色效果

时间：05-24来源：作者：点击数：24

CSS 实现 hover 时文字波浪式变色效果

实现效果

实现代码

<!DOCTYPE html>
<html>
  <body>
    <a href="#"><span data-content="Hello Guang"></span>Hello Guang</a>

    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
      }

      a {
        position: relative;
        display: inline-block;
        font-size: 32px;
        color: orange;
        font-weight: 800;
        text-decoration: underline;
        overflow: hidden;
      }

      a span {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 300ms ease;
      }

      a span::before {
        display: inline-block;
        content: attr(data-content);
        color: blue;
        transform: translateX(100%);
        transition: transform 300ms ease;
        text-decoration: underline;
      }

      a:hover span {
        transform: translateX(0);
      }

      a:hover span::before {
        transform: translateX(0);
      }
    </style>
  </body>
</html>