CSS之动态的渐变色盒子

原创已于 2024-10-31 14:40:43 修改 · 796 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2020-08-12 10:15:43 首次发布

未定义专栏收录该内容

22 篇文章

订阅专栏

这篇博客分享了如何使用CSS为网页创建动态彩色渐变效果的按钮，适用于提高页面元素的视觉吸引力。通过HTML和CSS代码示例，作者展示了实现这一效果的方法，并提及了对不同浏览器的兼容性处理。欢迎经验丰富的开发者提供反馈和建议。

CSS之动态的渐变色

HTML
CSS

在写页面的时候总会是按钮块，因个人工作本内容，这些按钮需要很醒目。所以就做了写动态彩色的按钮。直接上代码！

HTML

/* html /
div class="rainbow">彩虹屁</div>

CSS

这里呢做了一些浏览器的兼容。

/* css /
.rainbow {
width: 200px;
height:60px;background: linear-gradient(to right,#ff03da,#ee4474);
animation: changes 0.5s ease infinite;
-moz-animation: changes 0.5s ease infinite;
-o-animation: changes 0.5s ease infinite;
-webkit-animation: changes 0.5s ease infinite;
}
@keyframes changes {
    0%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
    50%{
        background: linear-gradient(to right,#ee4474,#ff03da);
    }
    100%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
}
@-moz-keyframes changes {
    0%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
    50%{
        background: linear-gradient(to right,#ee4474,#ff03da);
    }
    100%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
}
@-webkit-keyframes changes {
    0%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
    50%{
        background: linear-gradient(to right,#ee4474,#ff03da);
    }
    100%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
}
@-o-keyframes changes {
    0%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
    50%{
        background: linear-gradient(to right,#ee4474,#ff03da);
    }
    100%{
        background: linear-gradient(to right,#ff03da,#ee4474);
    }
}

萌新报道，有错误的地方望大佬们指正。奥利给