动态流体渐变效果
demo如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试</title> </head> <body> <style> * { margin: 0px; padding: 0px } .box { height: 900px; background: #0299d8; background: linear-gradient(45deg, #f5576c 0%, #304ffd 33%, #7b8df3 66%, #f093fb 100%); background-size: 400%; background-position: 0% 100%; animation: gradient 2s ease-in-out infinite; } @keyframes gradient { 50% { background-position: 100% 0 } } </style> <div class="box"></div> </body> </html>