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

您所在的位置：网站首页 › sublime居中代码 › CSS：实现 hover 时文字波浪式变色效果

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

2023-05-17 22:08| 来源: 网络整理| 查看: 265

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

彭世瑜 2023-05-08 10:07:33 ©著作权

文章标签 html css github 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

实现效果

在这里插入图片描述

实现代码 Hello Guang 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); } 在线预览

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

参考文章 CSS 实现 hover 时文字波浪式变色效果打赏赞收藏评论分享举报

上一篇：Vue.js：Vue-Router动态路由从服务器接口获取路由数据

下一篇：acme.sh从 letsencrypt 生成SSL免费证书并自动更新证书

【本文地址】

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

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

今日新闻

推荐新闻