CSS3悬停文字拆分效果-CSS3-前端日记簿

首页 CSS3 正文

CSS3悬停文字拆分效果

2023-11-22 88

效果图:

从效果中可以看见当鼠标悬停到文字上面的时候文本从中间被进行分割并且从中间到俩边伸展开一个横线并且文字上半部分文字进行变色

html：

我们给h1标签设置一个自定义属性data-name其值和文本内容相同

先通过网格布局将文字垂直居中显示并且设置好hover样式以及过渡动画

预览：

然后我们对before进行文字设置通过css函数attr来获取自定义属性值设置为内容然后通过定位来将文字设置在父级文本上面

并且给其也添加过渡动画以及鼠标悬停时进行倾斜以及变色：

最后就是给after进行横线设置了

原文链接：http://1.15.94.33/?id=221

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。