【发布时间】：2017-05-08 16:44:15
【问题描述】：
随着圣诞节的临近，我认为这将是编写圣诞节倒计时的最佳时机。我能够很好地通过 JavaScript 和 HTML，但开始在 CSS 上遇到一些问题。这是我所有的代码：
//Gets the HTML Elements
var head = document.getElementById('head');
var subhead = document.getElementById('subhead');
var counter = document.getElementById('counter');
//finds Christmas
var christmas = new Date('December 25, 2016 00:00:00');
//Updates Timer
function updateTimer(christmas) {
var time = christmas - new Date();
//Gives what to find on update
return {
'days': Math.floor(time / (1000 * 60 * 60 * 24)),
'hours': Math.floor((time/(1000 * 60 * 60)) % 24),
'minutes': Math.floor((time / 1000 / 60) % 60),
'seconds': Math.floor((time / 1000) % 60),
'total': time
};
};
//Starts the timer
function startTimer(counter, christmas) {
var timerInterval = setInterval(function() {
var timer = updateTimer(christmas);
//Changes the text of the 'counter'
counter.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//if christmas
if(timer.total < 1) {
clearInterval(timerInterval);
counter.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
head.innerHTML = "It's Christmas!!!";
subhead.innerHTML = "Merry Christmas to all!!!";
}
//if christmas eve
else if (timer.days < 1){
subhead.innerHTML = "It is currently Christmas Eve! How much longer until Christmas Day???";
}
}, 1000); //timer updates every second
};
window.onload = function() {
startTimer(counter, christmas);
}; *:focus {
outline: none;
}
body {
background-color: #991f00;
text-shadow: 2px 2px 8px #000000;
}
header {
color: white;
text-align: center;
font-family: 'Cinzel Decorative', sans-serif;
}
#clock span {
float: left;
text-align: center;
margin: 0 2.5%;
padding: 20px;
width: 20%;
box-sizing: border-box;
color: white;
font-family: 'Mountains of Christmas', sans-serif;
font-size: 40px;
}
#counter span {
background-color: #000000;
border-radius: 100%;
animation-name: colorChange;
animation-duration: 6s;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
@keyframes colorChange {
0%, 100% {
background-color: #42f471;
}
50% {
background-color: #ea524f;
}
}<!DOCTYPE html>
<html>
<head>
<title>Christmas Countdown</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>!-->
<script type="text/javascript" src="scripts/script.js" async></script>
<!--<script type="text/javascript" src="scripts/color.js" async></script>!-->
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Mountains+of+Christmas" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="clock">
<header>
<h1 id="head">Christmas Countdown!</h1>
<h4 id="subhead">How much longer until Christmas? Check the clock to find out!</h4>
</header>
<div id="count-container">
<div id="counter"></div>
<div id="labels">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
</div>
</div>
</body>
</html>如果您查看代码，您会发现我尝试使用 @keyframes 插入 CSS animation 等等。我试图在这里找到效果：https://kahoot.it/#/，但只使用 2 种颜色（#42f471 和 #ea524f）。我的想法是，我会将#42f471 作为起始颜色，然后它会淡化为#ea524f，它也会淡化回#42f471。我开始尝试将动画的持续时间设置为6s，但是当我加载页面时，我发现动画似乎甚至没有走到一半，然后突然闪回第一种颜色。尝试更长的持续时间，只会让它在闪回原来的颜色之前经历更少的时间。有趣的是，较短的持续时间使它经历了更多的动画。在1s 或更少时，它会正确地通过动画，但是速度太快了（我不想最终让任何人癫痫发作:)）。我已经搜索并搜索了互联网，但我尝试过的没有任何帮助。我对动画没有太多经验，所以几乎所有我用来制作动画的东西都是我从互联网上获得的。
感谢任何答案。如有必要，我也愿意接受使用 JavaScript 或 Jquery 的答案。
【问题讨论】：
标签： html css animation background-color keyframe