크리스마스가 올 때 크리스마스 카운트 다운을 작성하는 것이 가장 좋은시기라고 생각했습니다. 자바 스크립트와 HTML을 정상적으로 처리 할 수 있었지만 CSS에 문제가 생기기 시작했습니다. 여기에 내 모든 코드는 다음과 같습니다 당신이 코드를 보면, 당신은 내가 @keyframes 모두를 사용하여 CSS animation를 삽입하려고 것을 볼 수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>. 나는 여기에서 발견 된 효과를 얻으려고 애썼다 : https://kahoot.it/#/, 단 2 색 (#42f471 및 #ea524f)을 사용했다. 내 생각은 내가 #42f471으로 다시 페이드 될 #ea524f으로 사라질 시작 색상으로 #42f471을 만들 것이라고 생각했습니다. 나는 애니메이션의 지속 시간을 6s으로 설정하려고 시도했지만, 페이지를로드했을 때, 애니메이션이 갑자기 첫 번째 색상으로 깜박이기 전에 애니메이션이 중간에 보이지 않는 것으로 나타났습니다. 더 긴 지속 시간을 사용하면 원래 색으로 다시 깜박이기 전에 더 적은 시간을 거치게됩니다. 그러나 흥미롭게도 짧은 기간은 더 많은 애니메이션을 진행합니다. 1s 이하에서는 애니메이션을 제대로 통과 할 것이지만 속도가 너무 빠릅니다 (끝내기를 원하지 않습니다 :)). 나는 인터넷을 검색하고 검색했지만, 내가 시도한 것은 아무 것도 도움이되지 못했다. 저는 애니메이션에 대한 많은 경험이 없기 때문에 제가 인터넷에서 연구 한 애니메이션의 거의 모든 것들을 얻었습니다.
답변을 보내 주시면 감사하겠습니다. 필요한 경우 JavaScript 또는 Jquery를 사용하여 답변 할 수도 있습니다.
예, 문제가 해결된다! 나는 JavaScript와 관련이 있다고 생각했다. 정말 고맙습니다! –