动态效果就不放了，放两张效果不同的展示了
效果展示
首先创建html部分
<h1 class="gradient-box"><b><strong>123123123</strong></b></h1>
控制时间的
1. @keyframes gradientAnimation { 2. 0% { background-position: 0% 50%; } 3. 50% { background-position: 100% 50%; } 4. 100% { background-position: 0% 50%; } 5. }
控制样式的动画效果的
1. 2. /* 设置元素样式 */ 3. .gradient-box { 4. width: 200px; 5. height: auto; 6. background: linear-gradient(90deg, red, blue,gray,#02B379); 7. background-size: 200% 200%; 8. animation: gradientAnimation 2s ease infinite; 9. -webkit-text-fill-color: transparent; 10. -webkit-background-clip:text; 11. 12. }
完整代码
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8" /> 5. <title></title> 6. <meta name="viewport" content="width=device-width, initial-scale=1"> 7. <style type="text/css"> 8. 9. 10. /* 创建渐变动画 */ 11. @keyframes gradientAnimation { 12. 0% { background-position: 0% 50%; } 13. 50% { background-position: 100% 50%; } 14. 100% { background-position: 0% 50%; } 15. } 16. 17. /* 设置元素样式 */ 18. .gradient-box { 19. width: 200px; 20. height: auto; 21. background: linear-gradient(90deg, red, blue,gray,#02B379); 22. background-size: 200% 200%; 23. animation: gradientAnimation 2s ease infinite; 24. -webkit-text-fill-color: transparent; 25. -webkit-background-clip:text; 26. 27. } 28. 29. </style> 30. </head> 31. <body> 32. <h1 class="gradient-box"><b><strong>123123123</strong></b></h1> 33. </body> 34. </html>
本篇博客结束谢谢观看
