一、鼠标悬浮时，字体颜色从左到右依次变化
<!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>
原文：https://www.cnblogs.com/potatog/p/9298061.html