钧言极客钧言极客

不因何事去制作
只因兴趣而创造

使用CSS打造渐变背景动画

最近看见很多网站都使用上了渐变动画,我也来分享一个,纯css3实现一款简单的网页渐变背景动画特效,可以在css属性里修改成你喜欢的渐变颜色值和动画时间。

渐变效果.png

/* 动态渐变特效*/
body {
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
    0% {background-position: 0 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0 50%;}
}

@-moz-keyframes Gradient {
    0% {background-position: 0 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0 50%;}
}

@keyframes Gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
未经允许不得转载:钧言极客 » 使用CSS打造渐变背景动画

评论 抢沙发