×
首页编程语言正文
IT虾米网

遮罩动画效果

luoye 2022年02月09日 编程语言 3229 0 
<!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>

评论关闭
IT虾米网
IT虾米网 CSS

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！