CSS：实现 hover 时文字波浪式变色效果-CFANZ编程社区

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

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

实现效果

实现代码

<!DOCTYPE html>
<html>
  <body>
    <a rel="nofollow" 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>

在线预览

https://mouday.github.io/front-end-demo/css/hover-transform.html

参考文章

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

0 条评论