记录下学习过程
主要是用字体覆盖，并且对上层字体使用mask-image的属性进行展示(遮罩层)
<h1>爱你</h1>
h1{
margin:100px;
}
这个时候在样式中继续写入h1的after伪类，会在dom中插入这个内容，大概位置在：
<h1>
爱你
xxxx
</h1>
这个位置
样式中写入 h1::after{ content:'xxxxx' } 就可以了
如果觉得耦合度太低，可以在标签中自定义一个属性
例如
<h1 mytext="xxxx">爱你</h1>
这个时候可以把after伪类里面的content用attr进行标记
例如 h1::after{ content:attr(mytext) }
这个时候是在h1中更改页面中相应也会改
放上测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { margin: 100px; position: relative; } /* after为遮罩,意为两个相同文字 */ /* 文字渐变加动画特效 */ h1.aaa:after { content: attr(mytxt); position: absolute; top: 0; left: 0; color: red; /* 不兼容就加webkit */ mask-image: line-gradient(to bottom, red, transparent); /* 透明度越低颜色越重 */ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0.8)); /* 0.2秒 不停,不回头 */ /* animation: move 0.2s infinite forwards; */ /* 2秒 不停,来回 */ animation: move 2s infinite alternate-reverse; } /* 动画效果 */ @keyframes move { from { -webkit-mask-position: 0px 0px; } to { -webkit-mask-position: 0px 40px; } } /* 背景色对其内容区域进行裁剪 */ /* .bbb { border: 1px solid red; padding: 30px; background: green; background-clip: content-box; } */ h1.bbb:after { content: attr(mytxt); position: absolute; top:0; left: 0; /* 透明色 */ color: transparent; background: red; /* 对其文字背景色进行裁剪 */ -webkit-background-clip:text; /* 在左上角有一个百分之五十的圆 */ /* clip-path: circle(50% at 0 0); */ /* 可以自由控制想要的形状,不一定为圆形 */ clip-path: circle(40px at 0 50%); animation: move2 2s infinite alternate-reverse; } @keyframes move2{ from{ clip-path: circle(20px at 0 50%); } to{ clip-path: circle(20px at 100% 50%); } } /* 上面两个例子,第一个是移动到哪里哪里隐藏,第二个是移动到哪里哪里显示 */ </style> </head> <body> <h1 mytxt="我爱你" class="aaa">我爱你</h1> <h1 mytxt="我爱你" class="bbb">我爱你</h1> <h2 class="aaaa">我爱你</h1> <!-- 用text-fill-color也可以达成效果 --> </body> <script type="text/javascript"> </script> </html>