css实现流水文字、闪烁、荧光、炫酷

1、html部分

<div class="twinkle_text"> <p>web前端开发工程师 background-color: #333; } .twinkle_text { background-image: -webkit-linear-gradient(left, #ff0000, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, #ffff00 100%); -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */ -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */ -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite; font-size: 37px; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } }