首页 网页js代码 css3网页渐变背景动画特效 2019年12月19日 0条评论 css3网页渐变背景动画特效 内容 相关 css3网页渐变背景动画特效 纯css3实现一款简单的网页渐变背景动画特效，可以在css属性里修改成你喜欢的渐变颜色值。 直接添加代码到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"> <h1>CSS3背景渐变动画</h1> </div> </body> </html> 运行代码清空代码复制代码 点赞 (1) 打赏 分享 支付宝扫一扫 微信扫一扫 企鹅扫一扫
