纯css实现一款简单的网页动态渐变背景动画特效，渐变一般是两种颜色，这个可以设置多种渐变颜色，下面图片效果有点怪，是录屏问题 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css3网页动态渐变背景动画特效</title> <style> body { margin: 0; width: 100%; height: 100vh; font-family: "Exo", sans-serif; color: #fff; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .container { width: 100%; position: absolute; top: 35%; text-align: center; } h1 { font-weight: 300; } h3 { color: #eee; font-weight: 100; } h5 { color:#eee; font-weight:300; } a, a:hover { text-decoration: none; color: #ddd; } </style> </head> <body> <div class="container"> </div> </body> </html>
