一、鼠标悬浮时，字体颜色从左到右依次变化
<!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>