html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .masked h4{
- display: block;
- width: 600px;
- height: 200px;
- /* 渐变背景, 此处为能无缝拼接的渐变 即 0~100%*/ /*linear-gradient(线性渐变)*/
- background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
- color: transparent; /* 文字填充色为透明 */
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text; /* background-clip 规定背景的绘制区域:*/ /* 背景剪裁为文字, 相当于用背景填充文字 CSS3 新属性 */
- -webkit-background-size: 200% 100%; /* 背景图片向水平方向扩大一倍, 这样 background-position 才有移动与变化的空间 */
- background-size: 200% 100%;
- /* 动画 */
- -webkit-animation: masked-animation 4s infinite linear;
- }
- @keyframes masked-animation {
- 0% {
- background-position: 0 0; /*background-position 属性设置背景图像的起始位置.*/
- }
- 100% {
- background-position: -100% 0;
- }
- }
- @-webkit-keyframes masked-animation {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: -100% 0;
- }
- }
- </style>
- </head>
- <body>
- <div class="masked">
- <h4 > 这是一段可选文字这是一段可选文字这是一段可选文字这是一段可选文字 </h4>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/39070/4c44437cbde4bb99596c7adfa2324ae0.html