Home > Article > Web Front-end > css3 text gradient animation
This time I will bring you css3 text gradient animation. What are the precautions to implement css3 text gradient animation? The following is a practical case, let’s take a look.
Use the css3 attribute (background clipping):
<a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: border-box || padding-box || context-box || no -clip || text
What I used this time is: -webkit-background-clip:text;
Chestnut:
1、
<style> .masked{ text-align: center; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } @-webkit-keyframes masked-animation { 0%{ background-position: 0 0;} 100% { background-position: -100% 0;} } </style> <p class="masked" > <h1>→css3文字渐变动画效果 >></h1> </p>
Instructions:
-webkit-text-fill-color: transparent;(A transparent color must be filled here so that the gradient color will fill the text. If you remove this or fill it with another color, the effect will not be good. Obvious)
Retrieve or set the text fill color in the object, if both <' text-fill-color '> and <' color '> are set, <' text-fill-color ' > The defined color will overwrite the <' color '> attribute;
Effect:
2. It’s similar to the first chestnut, give more Set a background color, gradient from local to global
.slideShine{ background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0; background-size:20% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 36px; text-align: center; font-weight: bold; text-decoration: underline; } .slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;} @-webkit-keyframes slideShine { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } } @keyframes slideShine { 0% {background-position: 0 0; } 100% {background-position: 100% 100%; } } <p class="slideShine" >→css3文字渐变动画效果 >></p>
Effect:
3. Use webkit mask to implement text gradient animation
.text{position: relative;width: 57%;max-width:531px ;} .text .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 0;-webkit-mask-image: url(img/text.png);} .text .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;} @keyframes lightLine1{ 0%{transform:translateX(0) ;} 100%{transform:translateX(500%);} } @-webkit-keyframes lightLine1{ 0%{-webkit-transform:translateX(0) ;} 100%{-webkit-transform:translateX(500%) ;} } <p class="text" style="margin: 150px auto;"> <img src="img/text.png" /> <p class="mask"><i></i></p> </p>
Effect:
4. Realize the gradient of multi-color text
.text2{position: relative;width: 63%;max-width:586px ;} .text2 .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 1px;-webkit-mask-image: url(img/text3.png);} .text2 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine2 4s linear infinite;-webkit-animation: lightLine2 4s linear infinite;background-size:100% 100%;} @keyframes lightLine2{ 0%{transform:translateX(0) ;} 100%{transform:translateX(420%);} } @-webkit-keyframes lightLine2{ 0%{-webkit-transform:translateX(0) ;} 100%{-webkit-transform:translateX(420%) ;} } <p class="text2" style="margin: 150px auto;"> <img src="img/text3.png" /> <p class="mask"><i></i></p> </p>
Effect:
CSS3 dynamic prompt effect when the mouse moves into the image
Sticky Footer absolute bottom method
The above is the detailed content of css3 text gradient animation. For more information, please follow other related articles on the PHP Chinese website!