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

最新推荐文章于 2024-01-07 14:32:56 发布

彭世瑜

最新推荐文章于 2024-01-07 14:32:56 发布

阅读量501

点赞数 1

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

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/130553020

版权

css 专栏收录该内容

39 篇文章 3 订阅

订阅专栏

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>