с Рождеством, я подумал, что было бы идеальным временем, чтобы закодировать обратный отсчет Рождества. Мне удалось пройти через JavaScript и HTML, но у меня возникли проблемы с CSS. Вот все, что мой код: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>Если вы посмотрите на код, то вы увидите, что я попытался вставить CSS animation используя @keyframes и все. Я пытался найти эффект: https://kahoot.it/#/, однако только с использованием двух цветов (#42f471 и #ea524f). Мои мысли состояли в том, что я бы сделал #42f471 стартовым цветом, который затем исчезнет до #ea524f, который также исчезнет до #42f471. Я начал с того, что поставил продолжительность анимации на 6s, но когда я загрузил страницу, я обнаружил, что анимация даже не показалась на полпути, прежде чем внезапно вернуться к первому цвету. Пытаясь еще более продолжительной продолжительности, он пропускает меньше, а затем снова возвращается к исходному цвету. Интересно, однако, что более короткая продолжительность заставляет его пройти больше анимации. В 1s или меньше, он будет правильно проходить анимацию, но скорость слишком быстра (я не хочу, чтобы кто-нибудь прихватил :)). Я искал и обыскивал в Интернете, но ничто из того, что я пробовал, не помогло. У меня нет большого опыта работы с анимациями, поэтому почти все, что я использовал, чтобы сделать анимацию, которую я получил от исследования в Интернете.
Любые ответы приветствуются. Я также открыт для ответов с использованием JavaScript или JQuery, если это необходимо.
Да, это будет работать! Я подозревал, что это может иметь отношение к JavaScript. Спасибо огромное! –