背景颜色动态循环CSS
记录一下,misubmit为我博客留言的按钮。下面引用的代码可以直接使用。
#misubmit {background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: auto;background-size: 1000% 1000%;animation: gradientBG 30s ease infinite;}
/* 动画,控制背景 background-position */ @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
下面是思路
先设置渐变背景: background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);变化角度和颜色
设置背景尺寸比容器大几倍:background-size: 1000% 1000%;
再搞个循环动画,控制背景移动:background-position