https://codepen.io/P1N2O/pen/pyBNzX <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>纯css动态背景</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300" type="text/css" /> <style type="text/css"> body { width: 100wh; height: 90vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; -webkit-animation: Gradient 15s ease infinite; -moz-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } h1, h6 { font-family: 'Open Sans'; font-weight: 300; text-align: center; position: absolute; top: 45%; right: 0; left: 0; } </style> </head> <body> <h1>Pure CSS3 Animated Gradient Background</h1> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 纯css动态背景 喜欢 (0)or分享 (0)
