效果图:
源代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>body{margin:0;padding:0;font-family:"montserrat";background-image: linear-gradient(135deg,#2c3e50,#27ae60,#e74c3c,#be44ad);background-size:100%;animation:bganimation 15s infinite;}.text{color:white;text-align:center;text-transform:uppercase;margin:350px 0;font-size:30px;}@keyframes bganimation{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}</style></head><body><div class="text">Gradient Background Animation</div></body></html>