css text gradient color, css fonts gradient color

css 字體漸變色

demo

https://codepen.io/xgqfrms/pen/OJyajmp

gradient text & gradient background

https://www.cnblogs.com/xgqfrms/p/11882034.html

-webkit-background-clip & -webkit-text-fill-color

.class{
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.entry-title {
    font-size: 50px;
    font-weight: 500;
    margin: 20px 0;
    border-top: 2px solid #ecd018;
    border-bottom: 2px solid #ecd018;
    line-height: 1.4;
    padding: 20px 0;
    background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<h1 class="postTitle">
    <a id="cb_post_title_url" class="postTitle2" href="https://www.cnblogs.com/xgqfrms/p/10897934.html">
        shit mint-ui & vue mobile ui components
    </a>
</h1>

.postTitle {
    background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: word-color-animation 5s infinite linear;
}

---

---

©xgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---