-2
html과 CSS 및 가능하면 자바 스크립트를 사용하여 색상 변경/변색 배경을 만드는 방법은 https://kahoot.it에 있습니까?HTML/CSS/JS 색상 변경 배경 (Kahoot.it와 같이)
A
답변
1
당신은 검사 및
@keyframes bgcolor {
0% {
background-color: #45a3e5
}
30% {
background-color: #66bf39
}
60% {
background-color: #eb670f
}
90% {
background-color: #f35
}
100% {
background-color: #864cbf
}
}
body {
-webkit-animation: bgcolor 20s infinite;
animation: bgcolor 10s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}+0
감사합니다. 요소 검사를 시도했지만 어떤 파일이 들어 있는지 알 수 없습니다. – PlanetVaster
+0
@PlanetVaster이 해결책은 색상 순서가 번갈아 나타납니다. 예를 들어, 색상 순서가 빨간색, 노란색, 파란색이면 빨간색, 노란색, 파란색, 노란색, 빨간색 순서로 색상이 실행됩니다. 기본값은 빨간색, 노란색, 파란색, 빨간색, 노란색, 파란색입니다. – hungerstar
0
당신은 실제로 우리에게 어떤 것도 보여주지 않았습니다. 그러나 나는 좋은 사람 그리고 난 당신이 모범을 배우게됩니다 알고
body {
animation: colorchange 10s infinite;
}
@keyframes colorchange
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}
수정 필요. 분명히 body을 div 래퍼가 배경색으로 변경하십시오.
+0
죄송합니다, 나는 효과가있는 물건을 얻을 수는 있지만 보이지 않았다. 나는 그것을 게시하는 것을 잊어 버렸다. – PlanetVaster
0
/* The animation code */
@keyframes example {
0% {background-color: red;}
33% {background-color: yellow;}
66% {background-color: blue;}
100% {background-color: red;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
0
body {
animation: 10000ms ease-in-out infinite color-change;
}
@keyframes color-change {
0% {
background-color: teal;
}
20% {
background-color: gold;
}
40% {
background-color: indianred;
}
60% {
background-color: violet;
}
80% {
background-color: green;
}
100% {
background-color: teal;
}
}+0
이것은 분명히 작동합니다. 왜 downvote? – hungerstar
+0
나는 왜 그렇게 생각 하느냐, 나는 그것을 downvote하지 않았다. – PlanetVaster
은 당신이 뭔가를 시도 얻기 위해 배워야한다? 적어도 요소를 검사하십시오 .... 당신은 꽤 쉽게 찾을 수 있습니다 ... (키 프레임 애니메이션) – DaniP