文字过渡动画(叠加颜色)

标签：动画 叠加 过渡 text 0.5 background webkit fff 255

1.js

function aniText() {         var PC = $(window).width() > 1200,             mobile = $(window).width() <= 1200,             winWidth = $(window).width(),             winHeight = $(window).height();         if (mobile) { }         if (PC) {             const textElements = gsap.utils.toArray('.ani-text-opacity');             textElements.forEach(text => {                 gsap.to(text, {                     backgroundSize: '100%',                     ease: 'none',                     scrollTrigger: {                         trigger: text,                         start: 'center 80%',                         end: 'center 50%',                         scrub: true,                         // markers: {startColor: "red", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20},                     },                 });             });         }     }     aniText();

2.css

/* 动效文字 */ .ani-text-opacity {   // display: initial;   background: rgba(255, 255, 255, 0.3) -webkit-linear-gradient(to right, #fff, #fff) no-repeat;   background: rgba(255, 255, 255, 0.3) linear-gradient(to right, #fff, #fff) no-repeat;   -webkit-text-fill-color: transparent;   -webkit-background-clip: text;   background-size: 0 100%;   -webkit-transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;   transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s; } @media (max-width:1200px) {   .ani-text-opacity {     background: transparent;     -webkit-text-fill-color: inherit;     -webkit-background-clip: initial;   } }   3.html
<p class="title1 ani-text-opacity">青绿引领固废分选</p>

 

标签：动画,叠加,过渡,text,0.5,background,webkit,fff,255
From： https://www.cnblogs.com/Loreen/p/18303696