CSS 实现背景动态渐变效果

互联网 20-6-4

效果图

*{     margin: 0;     padding: 0; }  body{     height: 100vh;     width: 100%;     overflow: hidden;     background-image: linear-gradient(125deg,#F44336,#E91E63,#9C27B0,#3F51B5,#2196F3);     background-size: 400%;     font-family: "montserrat";     animation: bganimation 15s infinite; }  .text{     color: #fff;     font-size: 22px;     text-align: center;     margin: 350px 0;     /* text-transform: uppercase; */ }  @keyframes bganimation{     0%{         background-position: 0% 50%;     }     50%{         background-position: 100% 50%;     }     100%{         background-position: 0% 50%;     } }

推荐教程：《CSS教程》

以上就是CSS 实现背景动态渐变效果的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： css