码迷,mamicode.com
首页 > Web开发 > 详细

CSS 字体hover特效

时间:2018-07-12 13:20:50      阅读:1500      评论:0      收藏:0      [点我收藏+]

标签:relative   htm   pre   har   nbsp   idt   ansi   依次   type   

一、鼠标悬浮时,字体颜色从左到右依次变化
<!
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>box-size</title> <style type="text/css"> h1{ letter-spacing: 100px;/*必要*/ position: relative;/*必要*/ cursor: pointer; list-style-type: none; } h1:before{ content: attr(title);/*必要*/ width: 0%;/*必要*/ position: absolute;/*必要*/ z-index: 2;/*必要*/ color: #e49d99; white-space: nowrap; overflow: hidden;/*必要*/ transition: 3s;/*必要*/ } h1:hover:before{ width: 100%;/*必要*/ } </style> </head> <body> <h1 title="ABCDABCD">ABCDABCDE</h1> </body> </html>

 

CSS 字体hover特效

标签:relative   htm   pre   har   nbsp   idt   ansi   依次   type   

原文地址:https://www.cnblogs.com/potatog/p/9298061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!