<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>遮罩动画效果</title> </head> <style type="text/css"> body { background: #cccccc; } div { text-align: center; margin: auto; background-image: url(‘./sister.png‘); background-repeat: repeat-x; background-position: 0 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: bg_change 10s linear infinite; } @keyframes bg_change { from { background-position: 0 0; } to { background-position: 100% 0; } } span { color: #000; font-family: ‘Microsoft yahei‘; font-size: 100px; font-weight:bold; } </style> <body> <div> <span>俺妹不可能那么可爱</span> </div> </body> </html>
原文：http://www.cnblogs.com/lqcdsns/p/5581491.html