背景颜色动态循环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

较新的一篇: 装修前的测量
较旧的一篇: 6年免检

搜索中,请稍后 ...