一, 鼠标悬浮时, 字体颜色从左到右依次变化
- <!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>
来源: http://www.bubuko.com/infodetail-2681970.html