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

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

时间：05-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>

在线预览

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

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:css：去除input和textarea默认边框样式并美化下一篇:css：尺寸单位整理px、rem、em、vh、rpx

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有