我正在使用 CSS3 开发日出和日落动画,请检查运行时间 jsFiddle output .
太阳正按预期从一种颜色过渡到另一种颜色
中午
中午之后
晚上
晚上
清晨
问题在于天空从一种模式到另一种模式的过渡,颜色变化突然且非线性
用于更改天空颜色的代码
@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
1%{
background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
}
11%{
background: -webkit-linear-gradient(top, rgba(30, 152, 209, 1) 0%,rgb(202, 229, 243) 40%,rgba(125, 185, 232, 0.82) 100%); /* Background of Sky */
}
33% {
background: -webkit-linear-gradient(top, rgb(240, 231, 26) 0%,rgb(245, 86, 12) 50%,rgba(197, 127, 81, 0.82) 100%); /* Background of Sky */
}
66% {
background: -webkit-linear-gradient(top, rgb(34, 33, 3) 0%,rgb(162, 55, 5) 50%,rgb(24, 10, 1) 100%); /* Background of Sky */
}
100% {
background: -webkit-linear-gradient(top, rgba(5, 5, 5, 1) 0%,rgb(54, 55, 56) 40%,rgb(3, 3, 3) 100%); /* Background of Sky */
}
}
请查看JsFiddle Code (带评论)。
- 难道我们不应该在动画中使用线性渐变吗?
- 如果是,如何使天空颜色平滑过渡?
有什么我想念的吗?如果有人可以给我一些引用或任何指导以插入它,我将不胜感激。
最佳答案
我要做的是将整个渐变从头到尾应用到单个元素上(例如,我将使用 #sky
),然后为该元素的位置制作动画看起来颜色正在褪色。 Twitter 的 Bootstrap 使用此技巧为按钮悬停时的背景制作动画。
使用这种方法查看我的 JSFiddle 分支:http://jsfiddle.net/jakebellacera/6Zabx/
这是我添加的 CSS:
#sky {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 900%; /* This must be in a factor of three */
background-image: -webkit-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%, rgba(197, 127, 81, 0.82) 55%,
rgba(5, 5, 5, 1) 66%, rgb(54, 55, 56) 77%, rgb(3, 3, 3) 100%);
background-image: -moz-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%, rgba(197, 127, 81, 0.82) 55%,
rgba(5, 5, 5, 1) 66%, rgb(54, 55, 56) 77%, rgb(3, 3, 3) 100%);
-webkit-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */ /* Safari and Chrome */
-webkit-animation-duration: 14s; /* Total time of animation */
-webkit-animation-timing-function: linear; /* Just another timing function */
-webkit-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
-webkit-animation-direction: alternate; /* Lets do in alternate fashion */
-moz-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */ /* Mozzilla */
-moz-animation-duration: 14s; /* Total time of animation */
-moz-animation-timing-function: linear; /* Just another timing function */
-moz-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
-moz-animation-direction: alternate; /* Lets do in alternate fashion */
}
@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
0%{
top: 0px;
}
100% {
top: -800%; /* #sky's height - 100% */
}
}
@-moz-keyframes changeSkyColor /* Mozilla */
{
0%{
top: 0px;
}
100% {
top: -800%; /* #sky's height - 100% */
}
}
关于css - CSS3 动画和线性渐变的日出和日落不平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14785853/