效果图
CSS 代码:
*{ 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 实现背景动态渐变效果的详细内容,更多请关注亿速云其它相关文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。