Dieses Mal werde ich Ihnen eine CSS3-Textverlaufsanimation vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung einer CSS3-Textverlaufsanimation?
Verwenden Sie das CSS3-Attribut (Hintergrundausschnitt):<a href="http://www.php.cn/code/868.html" target="_blank">background-clip<p style="text-align: left;">: border-box ||. context-box || -clip:text;<code><a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: border-box || padding-box || context-box || no-clip || text
Kastanie: 1,
Beschreibung:
<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>
2. Ähnlich wie bei der ersten Kastanie, mit einer zusätzlichen Hintergrundfarbe, Farbverlauf von lokal zu global
Effekt:
.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>
3. Verwenden Sie die Webkit-Maske, um eine Textverlaufsanimation zu implementieren
Effekt:
.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>
4. Erzielen Sie den Farbverlauf von mehrfarbigem Text
Wirkung:
.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>
Weil die Mit der ersten und zweiten Methode allein kann die Farbe mehrerer Texte nicht erreicht werden. Sie werden durch die durch <'text-fill-color '> definierte Farbe überschrieben. Wenn der Text also auf mehrere Farben eingestellt ist, verwende ich stattdessen Bilder. Es ist jedoch ersichtlich, dass die Verwendung von Masken zur Erzielung eines Regenbogen-Textverlaufs nicht gut ist zu anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Dynamischer CSS3-Eingabeaufforderungseffekt, wenn sich die Maus in das Bild bewegt
Sticky Footer-Methode für den absoluten unteren RandDas obige ist der detaillierte Inhalt vonCSS3-Textverlaufsanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!