【前端】一行代码造就的渐变动态背景，hue-rotate属性

Python斗罗

已于 2024-03-04 16:32:25 修改

阅读量428

点赞数 2

分类专栏：前端文章标签：前端

于 2024-03-04 16:31:41 首次发布

本文链接：https://blog.csdn.net/weixin_62650212/article/details/136455920

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了CSS中的`hue-rotate`属性，如何在Webkit和非Webkit浏览器中实现颜色渐变的旋转效果，以及如何使用关键帧`@keyframes`创建无限循环动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hue-rotate属性介绍

/* @-webkit-keyframes hueRotate {
100% {
filter: hue-rotate(360deg);
}
} */

@keyframes hueRotate {
  100% {
    filter: hue-rotate(360deg);
  }
}

.bg1 {
  width: 100vw;
  height: 100vh;
  margin: auto;
  background: linear-gradient(30deg, #ffcc00, deeppink, #9c27b0);
  /* -webkit-animation: hueRotate 5s infinite alternate; */
  animation: hueRotate 5s infinite alternate;
}