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

Posted 2022-02-26 web半晨

目录

• 1、html部分
• 2、css部分

---

1、html部分

<div class="twinkle_text">
    <p>web前端开发工程师</p>
</div>

---

2、css部分

body 
    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;