当前位置：文江博客话题详情

原型脚本背景颜色：RGBA 颜色动画

发布于 2024-12-08 12:48:53 字数 184 浏览 2 评论 0原文

原型是这样的 http://pioupioum.fr/sandbox/jquery-color/和脚本化的？

我想为我的网站背景定期制作 RGBA 动画，以获得一些性感和奇特的东西......

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笑百媚生 2024-12-15 12:48:53

rgba 是最近才出现的，仅受最新浏览器支持。幸运的是，这些浏览器几乎相同，也支持 CSS 转换，因此不需要 Javascript 库。看看这个工作示例： massiveblue.com

source 解释道：

body, #logo h1 a, ul#menu li.on {background-color: #39f !important;}
@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}
body, #logo h1 a, ul#menu li.on {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

关键帧将“颜色”命名为帧序列，然后在 animation-name 规则中使用。 animation-iteration-count 是无限，因此它会连续循环。请记住为各种浏览器复制带有每个前缀 -webkit-、-moz- 和 -o- 的规则，并且一组为了将来的兼容性，没有前缀。

rgba is pretty recent and only supported by the newest browsers. Luckily these are pretty much the same browsers that also support CSS transitions so no Javascript library is needed. Just look at this working example: massiveblue.com

The source explains it:

body, #logo h1 a, ul#menu li.on {background-color: #39f !important;}
@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}
body, #logo h1 a, ul#menu li.on {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

The keyframes names "colours" as the sequence of frames, that is then used in animation-name rule. The animation-iteration-count is infinite so it loops continuously. Remember to duplicate the rules with each of the prefixes -webkit-, -moz- and -o- for the various browsers, and one set with no prefix for future compatibility.

回复收藏 0 原文

~没有更多了~