使用CSS3动画实现一个虚幻渐变的过渡背景色

    1. <div class="bg-color">
    2. </div>
    3. <style>
    4. .bg-color {
    5. width: 100vw;
    6. height: 100vh;
    7. color: #fff;
    8. background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    9. background-size: 400% 400%;
    10. -webkit-animation: Gradient 15s ease infinite;
    11. -moz-animation: Gradient 15s ease infinite;
    12. animation: Gradient 15s ease infinite;
    13. }
    14. @keyframes Gradient {
    15. 0% {
    16. background-position: 0% 50%;
    17. }
    18. 50% {
    19. background-position: 100% 50%;
    20. }
    21. 100% {
    22. background-position: 0% 50%;
    23. }
    24. }
    25. </style>