<!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>
时间： 2024-11-24 13:50:18