文字波动渐变动画,这个用在文字广告呈现的场合,是个不错的选择哟!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web前端之家</title> <style> .masked h4{ display: block; height: 200px; background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db); color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } @keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } @-webkit-keyframes masked-animation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } </style> </head> <body> <div class="masked"> <h4>欢迎来到Web前端之家,每天一小步,成功一大步,学习贵在坚持,加油吧!加入前端群295431592</h4> </div> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: